kokopu-react 3.1.0 → 3.3.0

package/src/chessboard/Draggable.tsx

@@ -27,68 +27,68 @@ import * as React from 'react';
 
 interface DraggableProps {
 
-	/**
-	 * Initial X coordinate of the handle.
-	 */
-	x: number;
-
-	/**
-	 * Initial Y coordinate of the handle.
-	 */
-	y: number;
-
-	/**
-	 * Width of the handle.
-	 */
-	width: number;
-
-	/**
-	 * Height of the handle.
-	 */
-	height: number;
-
-	/**
-	 * `true` if the handle corresponds to a draggable arrow, `false` if it corresponds to a draggable piece.
-	 */
-	isArrowHandle: boolean;
-
-	/**
-	 * Callback invoked when the drag starts. `x0` and `y0` correspond to the coordinates (relative to the hande) at which the drag has been initiated.
-	 */
-	onDragStart?: (x0: number, y0: number) => void;
-
-	/**
-	 * Callback invoked during the drag. `dx` and `dy` correspond to the coordinates of the drag translation vector.
-	 */
-	onDrag?: (dx: number, dy: number) => void;
-
-	/**
-	 * Callback invoked when the drag stops. `dx` and `dy` correspond to the coordinates of the drag translation vector.
-	 */
-	onDragStop?: (dx: number, dy: number) => void;
-
-	/**
-	 * Callback invoked when the drag is canceled.
-	 */
-	onDragCanceled?: () => void;
+    /**
+     * Initial X coordinate of the handle.
+     */
+    x: number;
+
+    /**
+     * Initial Y coordinate of the handle.
+     */
+    y: number;
+
+    /**
+     * Width of the handle.
+     */
+    width: number;
+
+    /**
+     * Height of the handle.
+     */
+    height: number;
+
+    /**
+     * `true` if the handle corresponds to a draggable arrow, `false` if it corresponds to a draggable piece.
+     */
+    isArrowHandle: boolean;
+
+    /**
+     * Callback invoked when the drag starts. `x0` and `y0` correspond to the coordinates (relative to the hande) at which the drag has been initiated.
+     */
+    onDragStart?: (x0: number, y0: number) => void;
+
+    /**
+     * Callback invoked during the drag. `dx` and `dy` correspond to the coordinates of the drag translation vector.
+     */
+    onDrag?: (dx: number, dy: number) => void;
+
+    /**
+     * Callback invoked when the drag stops. `dx` and `dy` correspond to the coordinates of the drag translation vector.
+     */
+    onDragStop?: (dx: number, dy: number) => void;
+
+    /**
+     * Callback invoked when the drag is canceled.
+     */
+    onDragCanceled?: () => void;
 }
 
 
 interface DragData {
-	originX: number;
-	originY: number;
+    originX: number;
+    originY: number;
 }
 
 
 interface PageCoordinates {
-	pageX: number;
-	pageY: number;
+    pageX: number;
+    pageY: number;
 }
 
 
 interface ClientCoordinates {
-	clientX: number;
-	clientY: number;
+    clientX: number;
+    clientY: number;
 }
 
 
@@ -97,139 +97,139 @@ interface ClientCoordinates {
  */
 export class Draggable extends React.Component<DraggableProps> {
 
-	private innerRef: React.RefObject<SVGRectElement> = React.createRef();
-	private dragData?: DragData;
-
-	private mouseDownListener = (evt: MouseEvent) => this.handleMouseDown(evt);
-	private mouseMoveListener = (evt: MouseEvent) => this.handleMouseMove(evt);
-	private mouseUpListener = (evt: MouseEvent) => this.handleMouseUp(evt);
-	private touchStartListener = (evt: TouchEvent) => this.handleTouchStart(evt);
-	private touchMoveListener = (evt: TouchEvent) => this.handleTouchMove(evt);
-	private touchEndListener = (evt: TouchEvent) => this.handleTouchEnd(evt);
-	private touchCancelListener = (evt: TouchEvent) => this.handleTouchCancel(evt);
-
-	componentDidMount() {
-		this.innerRef.current!.addEventListener('mousedown', this.mouseDownListener);
-		window.addEventListener('mousemove', this.mouseMoveListener);
-		window.addEventListener('mouseup', this.mouseUpListener);
-		this.innerRef.current!.addEventListener('touchstart', this.touchStartListener, { passive: false });
-		window.addEventListener('touchmove', this.touchMoveListener, { passive: false });
-		window.addEventListener('touchend', this.touchEndListener);
-		window.addEventListener('touchcancel', this.touchCancelListener);
-	}
-
-	componentWillUnmount() {
-		this.innerRef.current!.removeEventListener('mousedown', this.mouseDownListener);
-		window.removeEventListener('mousemove', this.mouseMoveListener);
-		window.removeEventListener('mouseup', this.mouseUpListener);
-		this.innerRef.current!.removeEventListener('touchstart', this.touchStartListener);
-		window.removeEventListener('touchmove', this.touchMoveListener);
-		window.removeEventListener('touchend', this.touchEndListener);
-		window.removeEventListener('touchcancel', this.touchCancelListener);
-	}
-
-	render() {
-		const classNames = [ 'kokopu-handle', this.props.isArrowHandle ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable' ];
-		return <rect ref={this.innerRef} className={classNames.join(' ')} x={this.props.x} y={this.props.y} width={this.props.width} height={this.props.height} />;
-	}
-
-	private handleTouchStart(evt: TouchEvent) {
-		if (this.dragData || evt.touches.length !== 1) {
-			return;
-		}
-		evt.preventDefault();
-		this.doInitDrag(evt.target as Element, evt.touches[0]);
-	}
-
-	private handleTouchMove(evt: TouchEvent) {
-		if (!this.dragData) {
-			return;
-		}
-		evt.preventDefault();
-		if (evt.touches.length === 1) {
-			this.doUpdateDrag(evt.touches[0]);
-		}
-		else {
-			this.doCancelDrag();
-		}
-	}
-
-	private handleTouchEnd(evt: TouchEvent) {
-		if (!this.dragData) {
-			return;
-		}
-		evt.preventDefault();
-		if (evt.touches.length === 0 && evt.changedTouches.length === 1) {
-			this.doEndDrag(evt.changedTouches[0]);
-		}
-		else {
-			this.doCancelDrag();
-		}
-	}
-
-	private handleTouchCancel(evt: TouchEvent) {
-		if (!this.dragData) {
-			return;
-		}
-		evt.preventDefault();
-		this.doCancelDrag();
-	}
-
-	private handleMouseDown(evt: MouseEvent) {
-		if (this.dragData || evt.button !== 0) {
-			return;
-		}
-		evt.preventDefault();
-		this.doInitDrag(evt.target as Element, evt);
-	}
-
-	private handleMouseMove(evt: MouseEvent) {
-		if (!this.dragData) {
-			return;
-		}
-		evt.preventDefault();
-		this.doUpdateDrag(evt);
-	}
-
-	private handleMouseUp(evt: MouseEvent) {
-		if (!this.dragData) {
-			return;
-		}
-		evt.preventDefault();
-		this.doEndDrag(evt);
-	}
-
-	private doInitDrag(target: Element, { pageX, pageY, clientX, clientY }: PageCoordinates & ClientCoordinates) {
-		this.dragData = {
-			originX: pageX,
-			originY: pageY,
-		};
-		const handleBoundary = target.getBoundingClientRect();
-		const x0 = clientX - handleBoundary.left;
-		const y0 = clientY - handleBoundary.top;
-		if (this.props.onDragStart) {
-			this.props.onDragStart(x0, y0);
-		}
-	}
-
-	private doUpdateDrag({ pageX, pageY }: PageCoordinates) {
-		const { originX, originY } = this.dragData!;
-		if (this.props.onDrag) {
-			this.props.onDrag(pageX - originX, pageY - originY);
-		}
-	}
-
-	private doEndDrag({ pageX, pageY }: PageCoordinates) {
-		const { originX, originY } = this.dragData!;
-		this.dragData = undefined;
-		if (this.props.onDragStop) {
-			this.props.onDragStop(pageX - originX, pageY - originY);
-		}
-	}
-
-	private doCancelDrag() {
-		if (this.props.onDragCanceled) {
-			this.props.onDragCanceled();
-		}
-	}
+    private innerRef: React.RefObject<SVGRectElement> = React.createRef();
+    private dragData?: DragData;
+
+    private mouseDownListener = (evt: MouseEvent) => this.handleMouseDown(evt);
+    private mouseMoveListener = (evt: MouseEvent) => this.handleMouseMove(evt);
+    private mouseUpListener = (evt: MouseEvent) => this.handleMouseUp(evt);
+    private touchStartListener = (evt: TouchEvent) => this.handleTouchStart(evt);
+    private touchMoveListener = (evt: TouchEvent) => this.handleTouchMove(evt);
+    private touchEndListener = (evt: TouchEvent) => this.handleTouchEnd(evt);
+    private touchCancelListener = (evt: TouchEvent) => this.handleTouchCancel(evt);
+
+    componentDidMount() {
+        this.innerRef.current!.addEventListener('mousedown', this.mouseDownListener);
+        window.addEventListener('mousemove', this.mouseMoveListener);
+        window.addEventListener('mouseup', this.mouseUpListener);
+        this.innerRef.current!.addEventListener('touchstart', this.touchStartListener, { passive: false });
+        window.addEventListener('touchmove', this.touchMoveListener, { passive: false });
+        window.addEventListener('touchend', this.touchEndListener);
+        window.addEventListener('touchcancel', this.touchCancelListener);
+    }
+
+    componentWillUnmount() {
+        this.innerRef.current!.removeEventListener('mousedown', this.mouseDownListener);
+        window.removeEventListener('mousemove', this.mouseMoveListener);
+        window.removeEventListener('mouseup', this.mouseUpListener);
+        this.innerRef.current!.removeEventListener('touchstart', this.touchStartListener);
+        window.removeEventListener('touchmove', this.touchMoveListener);
+        window.removeEventListener('touchend', this.touchEndListener);
+        window.removeEventListener('touchcancel', this.touchCancelListener);
+    }
+
+    render() {
+        const classNames = [ 'kokopu-handle', this.props.isArrowHandle ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable' ];
+        return <rect ref={this.innerRef} className={classNames.join(' ')} x={this.props.x} y={this.props.y} width={this.props.width} height={this.props.height} />;
+    }
+
+    private handleTouchStart(evt: TouchEvent) {
+        if (this.dragData || evt.touches.length !== 1) {
+            return;
+        }
+        evt.preventDefault();
+        this.doInitDrag(evt.target as Element, evt.touches[0]);
+    }
+
+    private handleTouchMove(evt: TouchEvent) {
+        if (!this.dragData) {
+            return;
+        }
+        evt.preventDefault();
+        if (evt.touches.length === 1) {
+            this.doUpdateDrag(evt.touches[0]);
+        }
+        else {
+            this.doCancelDrag();
+        }
+    }
+
+    private handleTouchEnd(evt: TouchEvent) {
+        if (!this.dragData) {
+            return;
+        }
+        evt.preventDefault();
+        if (evt.touches.length === 0 && evt.changedTouches.length === 1) {
+            this.doEndDrag(evt.changedTouches[0]);
+        }
+        else {
+            this.doCancelDrag();
+        }
+    }
+
+    private handleTouchCancel(evt: TouchEvent) {
+        if (!this.dragData) {
+            return;
+        }
+        evt.preventDefault();
+        this.doCancelDrag();
+    }
+
+    private handleMouseDown(evt: MouseEvent) {
+        if (this.dragData || evt.button !== 0) {
+            return;
+        }
+        evt.preventDefault();
+        this.doInitDrag(evt.target as Element, evt);
+    }
+
+    private handleMouseMove(evt: MouseEvent) {
+        if (!this.dragData) {
+            return;
+        }
+        evt.preventDefault();
+        this.doUpdateDrag(evt);
+    }
+
+    private handleMouseUp(evt: MouseEvent) {
+        if (!this.dragData) {
+            return;
+        }
+        evt.preventDefault();
+        this.doEndDrag(evt);
+    }
+
+    private doInitDrag(target: Element, { pageX, pageY, clientX, clientY }: PageCoordinates & ClientCoordinates) {
+        this.dragData = {
+            originX: pageX,
+            originY: pageY,
+        };
+        const handleBoundary = target.getBoundingClientRect();
+        const x0 = clientX - handleBoundary.left;
+        const y0 = clientY - handleBoundary.top;
+        if (this.props.onDragStart) {
+            this.props.onDragStart(x0, y0);
+        }
+    }
+
+    private doUpdateDrag({ pageX, pageY }: PageCoordinates) {
+        const { originX, originY } = this.dragData!;
+        if (this.props.onDrag) {
+            this.props.onDrag(pageX - originX, pageY - originY);
+        }
+    }
+
+    private doEndDrag({ pageX, pageY }: PageCoordinates) {
+        const { originX, originY } = this.dragData!;
+        this.dragData = undefined;
+        if (this.props.onDragStop) {
+            this.props.onDragStop(pageX - originX, pageY - originY);
+        }
+    }
+
+    private doCancelDrag() {
+        if (this.props.onDragCanceled) {
+            this.props.onDragCanceled();
+        }
+    }
 }

package/src/chessboard/Motion.tsx

@@ -29,20 +29,20 @@ const DEBUG_KEY = '__kokopu_debug_freeze_motion';
 
 interface MotionProps {
 
-	/**
-	 * Duration of the animation. Must be > 0.
-	 */
-	duration: number;
-
-	/**
-	 * Factory for the content being animated. The animation cursor is guaranteed to be valued between 0 and 1 inclusive.
-	 */
-	children: (cursor: number) => React.ReactNode;
+    /**
+     * Duration of the animation. Must be > 0.
+     */
+    duration: number;
+
+    /**
+     * Factory for the content being animated. The animation cursor is guaranteed to be valued between 0 and 1 inclusive.
+     */
+    children: (cursor: number) => React.ReactNode;
 }
 
 
 interface MotionState {
-	cursor: number;
+    cursor: number;
 }
 
 
@@ -51,61 +51,61 @@ interface MotionState {
  */
 export class Motion extends React.Component<MotionProps, MotionState> {
 
-	private animationFrameId?: number;
-	private initialTimestamp?: number;
-	private cursorStop: number;
-
-	constructor(props: MotionProps) {
-		super(props);
-		this.state = {
-			cursor: 0,
-		};
-		this.cursorStop = 1;
-
-		// WARNING: this hack exists only for testing purposes. DO NOT USE IT IN PRODUCTION.
-		const debugCursorStop = window[ /* eslint-disable @typescript-eslint/no-explicit-any */ DEBUG_KEY as any /* eslint-enable @typescript-eslint/no-explicit-any */ ];
-		if (typeof debugCursorStop === 'number' && debugCursorStop >= 0 && debugCursorStop <= 1) {
-			this.cursorStop = debugCursorStop;
-		}
-	}
-
-	componentDidMount() {
-		this.animationFrameId = window.requestAnimationFrame(ts => this.handleAnimationStep(ts));
-	}
-
-	componentWillUnmount() {
-		if (this.animationFrameId !== undefined) {
-			window.cancelAnimationFrame(this.animationFrameId);
-			this.animationFrameId = undefined;
-		}
-	}
-
-	private handleAnimationStep(timestamp: number) {
-		if (this.initialTimestamp === undefined) {
-			this.initialTimestamp = timestamp;
-		}
-
-		// Compute the animation cursor and update the state.
-		let cursor = (timestamp - this.initialTimestamp) / this.props.duration;
-		// istanbul ignore if
-		if (cursor < 0) { // This case is not supposed to happen if timestamps are generated with a monotonic clock.
-			cursor = 0;
-		}
-		else if (cursor > this.cursorStop) {
-			cursor = this.cursorStop;
-		}
-		this.setState({ cursor: cursor });
-
-		// Schedule the next animation frame if necessary.
-		if (cursor === this.cursorStop) {
-			this.animationFrameId = undefined;
-		}
-		else {
-			this.animationFrameId = window.requestAnimationFrame(ts => this.handleAnimationStep(ts));
-		}
-	}
-
-	render() {
-		return this.props.children(this.state.cursor);
-	}
+    private animationFrameId?: number;
+    private initialTimestamp?: number;
+    private cursorStop: number;
+
+    constructor(props: MotionProps) {
+        super(props);
+        this.state = {
+            cursor: 0,
+        };
+        this.cursorStop = 1;
+
+        // WARNING: this hack exists only for testing purposes. DO NOT USE IT IN PRODUCTION.
+        const debugCursorStop = window[ /* eslint-disable @typescript-eslint/no-explicit-any */ DEBUG_KEY as any /* eslint-enable @typescript-eslint/no-explicit-any */ ];
+        if (typeof debugCursorStop === 'number' && debugCursorStop >= 0 && debugCursorStop <= 1) {
+            this.cursorStop = debugCursorStop;
+        }
+    }
+
+    componentDidMount() {
+        this.animationFrameId = window.requestAnimationFrame(ts => this.handleAnimationStep(ts));
+    }
+
+    componentWillUnmount() {
+        if (this.animationFrameId !== undefined) {
+            window.cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = undefined;
+        }
+    }
+
+    private handleAnimationStep(timestamp: number) {
+        if (this.initialTimestamp === undefined) {
+            this.initialTimestamp = timestamp;
+        }
+
+        // Compute the animation cursor and update the state.
+        let cursor = (timestamp - this.initialTimestamp) / this.props.duration;
+        // istanbul ignore if
+        if (cursor < 0) { // This case is not supposed to happen if timestamps are generated with a monotonic clock.
+            cursor = 0;
+        }
+        else if (cursor > this.cursorStop) {
+            cursor = this.cursorStop;
+        }
+        this.setState({ cursor: cursor });
+
+        // Schedule the next animation frame if necessary.
+        if (cursor === this.cursorStop) {
+            this.animationFrameId = undefined;
+        }
+        else {
+            this.animationFrameId = window.requestAnimationFrame(ts => this.handleAnimationStep(ts));
+        }
+    }
+
+    render() {
+        return this.props.children(this.state.cursor);
+    }
 }