How to track moves / onDrop event? AND How to properly validate connection?

[cyborat]

Hello - love this framework! Just a couple of questions, and please forgive if they seem too n00b :)

Question 1:

The API is great, however doesn't really show examples. For instance, is there an event exposed to track each move? I see the events for pieces, where you can programmatically drag or drop - but are there exposed onUp or onDown or onDrop or even an onDragStart somewhere to more easily track things such as incrementing a move counter each time a piece is moved?

Question 2:

I want to make sure that valid connections stick and persist, but invalid connections do not. The forceConnectionWhileDragging method is perfect, but not when invalid piece connections happen. I want to disallow invalid connections in conjunction. What's the proper rubik's cube pattern for this to properly work? :)
:
Basically I think I need to use a piece validator, but similar to the first question, the API docs don't show much in the way of examples on how to properly do so, unless I'm just missing it? Which could be, haha...

Thanks in advance!

[cyborat]

As an update:

I've gotten my move counter going, via iterating through the pieces shown on another post in here.

I also have validations I'm happy with - HOWEVER - the issue I'm having now, is that once I call disconnect() on a piece, suddenly the whole puzzle now allows disconnections, and forceConnectionWhileDragging() stops working at that point. Tried calling it again onDisconnect, but no avail.

So - I can indeed verify that a piece belongs to its target or not, and then do a 'disconnect' if it does not. But that breaks the forced puzzle progress to stay in place, and pieces can then just detach willy nilly. No errors in the console, so I'm not sure what the proper method to do this might be just yet. Will keep picking at it and see what I can come up with unless someone else has suggestions?

[flbulgarelli]

👋 Hi @cyborat!

Thanks for your comments!

but are there exposed onUp or onDown or onDrop or even an onDragStart somewhere to more easily track things such as incrementing a move counter each time a piece is moved?

There are not such fine-grained events at the model layer. However, you can track:

• movement with Puzzle#onTranslate: it is fired every time a piece is moved
• connection and disconnection of pieces with Puzzle#onConnect & Puzzle#onDisconnect: they are fired each time a piece is actually connected to another one - regardless of it is in its right position or not
• validity with Puzzle#onValid: it is fired when the validator attached to it changes its valid state.

In addition, you can use the low-level events of the Konva UI layer, like KonvaPainter#onDragEnd and KonvaPainter#onDrag. If that is not enough, you can still listen to the native events of the Konva's layer. You can access it through Canvas#__konvaLayer__.

I want to make sure that valid connections stick and persist, but invalid connections do not.

That's a nice idea. It is not bundled out-of-the-box. I would try:

• disconnecting after connecting to an invalid piece
• prevent connection to an invalid piece at all. That is the right thing to do, but its true that DragMode only tells whether you should disconnect, but nothing about connect, and changing that would require a refactor. Another approach would be hacking connector.horizontal and connector.vertical instances by overriding its Connector#canConnectWith, so that they take metadata into account.

I've gotten my move counter going, via iterating through the pieces shown on another post in here.

Could you please provide some working code/codepen here to better understand your approach and error?

[cyborat]

I've gotten my move counter going, via iterating through the pieces shown on another post in here.

Could you please provide some working code/codepen here to better understand your approach and error?

Sure thing! Simple after I thought about it - all I needed was to use 'dragend' on the figures:

      // Set Up Move Tracking
      const figures = Object.values(puzzleBoard.figures);
      figures.forEach(it => {
        it.group.on('dragend', () => incrementMoveCount());
      });

[flbulgarelli]

OK, I see that both connector and dragMode are not exposed in the index.js, so depending on how you are using headbreaker, you may have not access to them. I could create a new release with that change, though.

That said, if you hack the canConnect with a logic for validating connection as previously said, you could get the desired effect:

headbreaker.connector.horizontal.canConnectWith = function(one, other, proximity) {
  return this.closeTo(one, other, proximity) && this.match(one, other) &&
    one.metadata.id.replace('-kanji') == other.metadata.id.replace('-emoji') ;
}

Screencast.from.22-05-23.09.57.55.webm

This is currently just a hack, but I think that may be reified into a better concept within the framework.

Hope that helps!

[flbulgarelli]

PS: Here there is a draft of a potential addition to the framework to address this issue #63. Any comments are welcomed.

[cyborat]

This will be fantastic! Do you know yet when you'll feel good about merging it in? :)

[cyborat]

Wanted to let you know, I pulled down that branch, built it and other than a typo I needed to fix, it's doing the trick :)

The only thing that might be nice to know, is what is the incoming attempted connection side? For example, in your pseudo code you have it comparing the ids of a couple pieces, and that's great - basically what I'm doing. However, it is possible for a horizontal connection to happen between two pieces on BOTH of their sides.

So if I am trying a horizontal connection between a piece with two 'tabs' on left/right, and the other has two 'inserts' on left/right - it could be trying to connect on either side. Can we add something to the metadata perhaps, to let it know what side is being attempted, and then clean that up after?

Otherwise this solution works great!

NOTE: There was a typo on the attach function - the code was trying to call attachConnectionRequirement in puzzle.js, but it was named attachRequirement. Fixing that, I was up and going! Did a build/pack here locally, and it's doing great (just wondering about the inquiry above about potential metadata, unless I'm overthinking.... which wouldn't be a first, ha!)

Once you do merge these updates in I'll pull the latest from your repo - thanks so much for looking at this and being responsive! :)

[flbulgarelli]

Hi! Thanks for trying it 🙏

I need to still add some tests before merging, which I expect to do by the end of the week. However, feel free to accelerate that times by submitting a better PR based on my branch with the fixed typos you mentioned and those extra tests.

Regarding your question about the metadata, take into account that such dictionary is 100% user defined, so you may add any information that better suits your validation needs.

Perhaps it would be nice to have something to automatically mark pieces with a validation-code - which is not that hard if you take into account that regular puzzles are the most common use case, so that you could know if a piece is in its right position just by checking an integer index going from left to right and top to down, for example.

E.g. in a rectangular puzzle of m x n, a piece Pi can connect to the right to another Pj if j = i + 1. Also, Pi can connect to Pj to the bottom if j = i + m. And so on.

[flbulgarelli]

PS: headbreaker >= 3.0 now ships with connection requirements: https://flbulgarelli.github.io/headbreaker/#labels.

[albert-estradera]

Ok but, how can I establish connection requirements horizontally and vertically, that is, how can I make one piece connect with another horizontally and vertically with a different one? Could you give more examples please? thanks

[flbulgarelli]

👋 Hi @albert-estradera!

I am not sure if I got your question. However, if you are asking how you could have different requirements for horizontal and vertical connections - that is, restrict vertical and horizontal connections in different ways - then you can use the attachHorizontalRequirement and attachVerticalRequirement of Puzzle. I have just added the following extra samples in the README:

// Add custom metadata to pieces
a.metadata.flavour = "chocolate";
a.metadata.sugar = true;
b.metadata.flavour = "chocolate";
b.metadata.sugar = false;

c.metadata.flavour = "vainilla";
c.metadata.sugar = false;
d.metadata.flavour = "vainilla";
d.metadata.sugar = true;

// Require pieces to match a given condition in
// order to be connected
puzzle.attachConnectionRequirement((one, other) => one.metadata.flavour === other.metadata.flavour);

// Alternatively, set individual requirements for horizontal
// and vertical connections
puzzle.attachVerticalConnectionRequirement((one, other) => one.metadata.flavour === other.metadata.flavour);
puzzle.attachHorizontalConnectionRequirement((one, other) => one.metadata.sugar !== other.metadata.sugar);

// Remove all - vertical and horizontal - connection requirements
puzzle.clearConnectionRequirements();

As you see, connection requirements are not coupled to metadata, but it is definitely the easiest way to add custom information to each piece, and then use that information to apply additional conditions when trying to connect close pieces with the proper shapes.

Hope that helps! 😄

[albert-estradera]

ok thanks for your fast reply