How to move a puzzle piece in the middle?

[RukshanJS]

After the puzzle is almost solved, how can we remove a piece in the middle? If I click on a middle piece (surrounded by all 4 sides), then the whole puzzle structure is moved, which is not what is expected.

Expected - remove that selected puzzle piece and be draggable.

[flbulgarelli]

Hi!👋 That behavior is actually by design, in order to allow all operations - drag group, connect pieces, push pieces, disconnect pieces - simple in terms of gestures.

However I know that may not not cover all use cases. For example, we could use the alt or control key to tell that user wants to disconnect the piece - at the cost of a more complex set of user commands. Or perhaps implement a whole new gesture.

But, in any case, that is not supported out of the box. You'll need to implement by yourself at the Konva layer. Here #42 there is a code sample that shows how to access the figures - the visual objects on top of the puzzle model. You could try to disconnect the pieces as part of the drag event, on a condition of your preference.

Just ask back if you need more assistance with it! 😁

[flbulgarelli]

PS: I have made some progress with integrating those ideas into the core code. See here #47.

[flbulgarelli]

I have just released a new version of headbreaker that ships with that functionality. You can check it here: https://flbulgarelli.github.io/headbreaker/#keyboard-gestures.

You can find more details here:

headbreaker/src/canvas.js

Lines 336 to 357 in d015591

	/**
	* Registers keyboard gestures. `gestures` must be an object with one or more entries with the following format:
	*
	* ```
	* { keyStrokeNumber: (puzzle) => ...change drag mode... }
	* ```
	*
	* For example, if you want to configure your canvas to force pieces to be moved together using the `alt` key, you can do the following:
	*
	* ```
	* canvas.registerKeyboardGestures({ 18: (puzzle) => puzzle.forceConnectionWhileDragging() })
	* ```
	*
	* If no gestures are given, then the following gestures are configured:
	*
	* - `16` (`shift`): drags blocks of pieces as a whole, regardless of the movement direction
	* - `17` (`ctrl`): drags pieces individually, regardless of the movement direction
	*
	*
	* @param {object} gestures
	*/
	registerKeyboardGestures(gestures = {

[JeffroDB]

Any thoughts on how we could implement this type of functionality -- drag blocks -- if a user is using an iPad or iPhone device which doesn't have a keyboard in play? A very large number of my users are visiting my website via phones or pads.

Perhaps by having a mouse double-click on a group of attached pieces cause them to be treated as a block (another double-click releases the block). I believe in that manner a phone or pad's double tap might do the trick.