@mirasen/chessboard 1.2.3 → 1.2.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @mirasen/chessboard
 
+## 1.2.4
+
+### Patch Changes
+
+- eccb340: Fix fast drag-and-drop reliability in Chrome and other browsers that may dispatch `lostpointercapture` before or instead of `pointerup`.
+
+  Active drag gestures now remember the pointer button that started them. When that button is released during `lostpointercapture`, the board resolves the gesture through the same terminal release path as `pointerup` instead of cancelling it prematurely.
+
+  This fixes fast drops that could previously return a piece to its source square even when the target was valid, while preserving proper cleanup for fast releases outside the board and for extension-owned drag gestures such as annotations.
+
 ## 1.2.3
 
 ### Patch Changes

package/dist/extensions/first-party/annotations/interaction.js

@@ -41,7 +41,8 @@ export function handleAnnotationsEvent(state, context) {
             type: ANNOTATIONS_DRAW_DRAG_TYPE,
             sourceSquare: targetSquare,
             sourcePieceCode: null,
-            targetSquare: targetSquare
+            targetSquare: targetSquare,
+            startButton: rawEvent.button
         });
         if (success) {
             rawEvent.preventDefault();
@@ -68,7 +69,8 @@ export function handleAnnotationsEvent(state, context) {
         type: ANNOTATIONS_IDLE_CLEAR_DRAG_TYPE,
         sourceSquare: targetSquare,
         sourcePieceCode: null,
-        targetSquare: targetSquare
+        targetSquare: targetSquare,
+        startButton: rawEvent.button
     });
     if (success) {
         rawEvent.preventDefault();

package/dist/extensions/types/basic/events.d.ts

@@ -15,11 +15,13 @@ export type RuntimeInteractionActionStartLiftedDrag = {
     type: 'startLiftedDrag';
     source: Square;
     target: Square;
+    startButton: number;
 };
 export type RuntimeInteractionActionStartReleaseTargetingDrag = {
     type: 'startReleaseTargetingDrag';
     source: Square;
     target: Square;
+    startButton: number;
 };
 export type RuntimeInteractionActionCompleteCoreDrag = {
     type: 'completeCoreDragTo';

package/dist/extensions/types/basic/interaction.d.ts

@@ -4,6 +4,7 @@ export interface ExtensionDragSessionBase {
     sourceSquare: Square | null;
     sourcePieceCode: PieceCode | null;
     targetSquare: Square | null;
+    startButton: number;
 }
 export interface ExtensionDragSessionLiftedPiece extends ExtensionDragSessionBase {
     type: 'lifted-piece-drag';

package/dist/runtime/factory/input.js

@@ -18,7 +18,7 @@ export function createRuntimeInteractionSurface(state) {
             const internalState = state();
             return internalState.state.board.getPieceCodeAt(square);
         },
-        startLiftedDrag(source, target) {
+        startLiftedDrag(source, target, startButton) {
             const internalState = state();
             const interactionMutationSession = internalState.mutation.getSession();
             const interaction = internalState.state.interaction;
@@ -34,7 +34,8 @@ export function createRuntimeInteractionSurface(state) {
                 type: 'lifted-piece-drag',
                 sourceSquare: interactionSource.square,
                 sourcePieceCode: interactionSource.pieceCode,
-                targetSquare: target
+                targetSquare: target,
+                startButton
             };
             interaction.setDragSession(dragSession, interactionMutationSession);
             runtimeRunMutationPipeline(internalState);
@@ -66,7 +67,7 @@ export function createRuntimeInteractionSurface(state) {
             mutationSession.addMutation('runtime.interaction.completeExtensionDragTo', true, dragSession);
             runtimeRunMutationPipeline(internalState);
         },
-        startReleaseTargetingDrag(source, target) {
+        startReleaseTargetingDrag(source, target, startButton) {
             const internalState = state();
             const mutationSession = internalState.mutation.getSession();
             const interaction = internalState.state.interaction;
@@ -77,7 +78,8 @@ export function createRuntimeInteractionSurface(state) {
                 type: 'release-targeting',
                 sourceSquare: source,
                 sourcePieceCode: interaction.selected.pieceCode,
-                targetSquare: target
+                targetSquare: target,
+                startButton
             };
             interaction.setDragSession(dragSession, mutationSession);
             runtimeRunMutationPipeline(internalState);

package/dist/runtime/input/controller/factory.js

@@ -22,10 +22,10 @@ export function createInteractionController(options) {
             if (action) {
                 switch (action.type) {
                     case 'startLiftedDrag':
-                        internalState.surface.startLiftedDrag(action.source, action.target);
+                        internalState.surface.startLiftedDrag(action.source, action.target, action.startButton);
                         break;
                     case 'startReleaseTargetingDrag':
-                        internalState.surface.startReleaseTargetingDrag(action.source, action.target);
+                        internalState.surface.startReleaseTargetingDrag(action.source, action.target, action.startButton);
                         break;
                     case 'completeCoreDragTo':
                         internalState.surface.completeCoreDragTo(action.target);

package/dist/runtime/input/controller/helpers.d.ts

@@ -1,3 +1,4 @@
 import type { Square } from '../../../state/board/types/internal.js';
 import type { InteractionStateSnapshot } from '../../../state/interaction/types/main.js';
+export declare function buttonToButtonsMask(button: number): number | null;
 export declare function canMoveTo(snapshot: InteractionStateSnapshot, target: Square): boolean;

package/dist/runtime/input/controller/helpers.js

@@ -1,3 +1,19 @@
+export function buttonToButtonsMask(button) {
+    switch (button) {
+        case 0:
+            return 1;
+        case 1:
+            return 4;
+        case 2:
+            return 2;
+        case 3:
+            return 8;
+        case 4:
+            return 16;
+        default:
+            return null;
+    }
+}
 export function canMoveTo(snapshot, target) {
     const { movability } = snapshot;
     if (movability.mode === 0 /* MovabilityModeCode.Disabled */) {

package/dist/runtime/input/controller/pointer.js

@@ -2,7 +2,7 @@ import assert from '@ktarmyshov/assert';
 import { isEmptyPieceCode, isNonEmptyPieceCode } from '../../../state/board/check.js';
 import { fromPieceCode } from '../../../state/board/piece.js';
 import { isDragSessionCoreOwned } from '../../../state/interaction/helpers.js';
-import { canMoveTo } from './helpers.js';
+import { buttonToButtonsMask, canMoveTo } from './helpers.js';
 export function determineActionPointerDown(state, context) {
     assert(context.rawEvent.type === 'pointerdown', 'determineActionPointerDown should only be called for pointerdown events');
     const rawEvent = context.rawEvent;
@@ -31,7 +31,8 @@ export function determineActionPointerDown(state, context) {
                 return {
                     type: 'startReleaseTargetingDrag',
                     source: interaction.selected.square,
-                    target: sceneEvent.targetSquare
+                    target: sceneEvent.targetSquare,
+                    startButton: rawEvent.button
                 };
             }
             const isLegalMoveTarget = interaction.movability.mode === 1 /* MovabilityModeCode.Free */ ||
@@ -42,7 +43,8 @@ export function determineActionPointerDown(state, context) {
                 return {
                     type: 'startReleaseTargetingDrag',
                     source: interaction.selected.square,
-                    target: sceneEvent.targetSquare
+                    target: sceneEvent.targetSquare,
+                    startButton: rawEvent.button
                 };
             }
         }
@@ -55,7 +57,8 @@ export function determineActionPointerDown(state, context) {
             return {
                 type: 'startLiftedDrag',
                 source: sceneEvent.targetSquare,
-                target: sceneEvent.targetSquare
+                target: sceneEvent.targetSquare,
+                startButton: rawEvent.button
             };
         }
     }
@@ -72,59 +75,43 @@ export function determineActionPointerMove(state, context) {
     }
     return null;
 }
-export function determineActionPointerUp(state, context) {
-    assert(context.rawEvent.type === 'pointerup', 'determineActionPointerUp should only be called for pointerup events');
+function determineActionTerminalRelease(state, context) {
     const interaction = state.surface.getInteractionStateSnapshot();
     const dragSession = interaction.dragSession;
     if (!dragSession) {
-        // No active drag session, so nothing to do on pointer up
         return null;
     }
     const sceneEvent = context.sceneEvent;
-    assert(sceneEvent, 'Scene event should be present for pointer events');
+    assert(sceneEvent, 'Scene event should be present for terminal release');
     if (!isDragSessionCoreOwned(dragSession)) {
-        // For extension-owned drag sessions, we simply end the session without attempting to make a move,
-        // since the runtime doesn't have enough information about the semantics of the drag session.
         return {
             type: 'completeExtensionDrag',
             target: sceneEvent.targetSquare
         };
     }
-    // Check if the square is the same as the source square of the drag session.
-    // If it is, then we can end the drag session without making a move.
     if (sceneEvent.targetSquare === dragSession.sourceSquare) {
-        return {
-            type: 'cancelActiveInteraction'
-        };
+        return { type: 'cancelActiveInteraction' };
     }
-    // Check if the target square is a valid destination for the selected piece.
     if (sceneEvent.targetSquare !== null && canMoveTo(interaction, sceneEvent.targetSquare)) {
-        return {
-            type: 'completeCoreDragTo',
-            target: sceneEvent.targetSquare
-        };
+        return { type: 'completeCoreDragTo', target: sceneEvent.targetSquare };
     }
-    // Invalid target: piece returns to source for lifted drag (selection preserved),
-    // or selection is cleared for release targeting.
     if (dragSession.type === 'lifted-piece-drag') {
-        return {
-            type: 'cancelActiveInteraction'
-        };
+        return { type: 'cancelActiveInteraction' };
     }
     else {
-        return {
-            type: 'cancelInteraction'
-        };
+        return { type: 'cancelInteraction' };
     }
 }
+export function determineActionPointerUp(state, context) {
+    assert(context.rawEvent.type === 'pointerup', 'determineActionPointerUp should only be called for pointerup events');
+    return determineActionTerminalRelease(state, context);
+}
 export function determineActionPointerCancel(state, context) {
     assert(context.rawEvent.type === 'pointercancel', 'determineActionPointerCancel should only be called for pointercancel events');
     const interaction = state.surface.getInteractionStateSnapshot();
     if (!interaction.dragSession) {
-        // No active drag session, so nothing to do on pointer cancel
         return null;
     }
-    // Cancel the active interaction on pointer cancel
     return {
         type: 'cancelActiveInteraction'
     };
@@ -132,12 +119,17 @@ export function determineActionPointerCancel(state, context) {
 export function determineActionLostPointerCapture(state, context) {
     assert(context.rawEvent.type === 'lostpointercapture', 'determineActionLostPointerCapture should only be called for lostpointercapture events');
     const interaction = state.surface.getInteractionStateSnapshot();
-    if (!interaction.dragSession) {
-        // No active drag session, so nothing to do on lost pointer capture
+    const dragSession = interaction.dragSession;
+    if (!dragSession) {
         return null;
     }
-    // Cancel the active interaction on lost pointer capture
-    return {
-        type: 'cancelActiveInteraction'
-    };
+    const rawEvent = context.rawEvent;
+    const mask = buttonToButtonsMask(dragSession.startButton);
+    if (mask === null) {
+        return { type: 'cancelActiveInteraction' };
+    }
+    if ((rawEvent.buttons & mask) === 0) {
+        return determineActionTerminalRelease(state, context);
+    }
+    return { type: 'cancelActiveInteraction' };
 }

package/dist/runtime/input/controller/types.d.ts

@@ -5,8 +5,8 @@ import type { InteractionStateSnapshot } from '../../../state/interaction/types/
 export interface RuntimeInteractionSurface {
     getInteractionStateSnapshot(): InteractionStateSnapshot;
     getPieceCodeAt(square: Square): PieceCode;
-    startLiftedDrag(source: Square, target: Square): void;
-    startReleaseTargetingDrag(source: Square, target: Square): void;
+    startLiftedDrag(source: Square, target: Square, startButton: number): void;
+    startReleaseTargetingDrag(source: Square, target: Square, startButton: number): void;
     completeCoreDragTo(target: Square): void;
     completeExtensionDrag(target: Square | null): void;
     updateDragSessionCurrentTarget(target: Square | null): void;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@mirasen/chessboard",
 	"description": "Framework-agnostic TypeScript chessboard platform with real chess interaction built in.",
-	"version": "1.2.3",
+	"version": "1.2.4",
 	"license": "MIT",
 	"author": {
 		"name": "Mirasen",