onValid trigger fail

[lizyChy0329]

Describe the bug
Drag the piece can not trigger onValid function but onDisconnect

To Reproduce
Let's us see the Screenshots

Expected behavior
trigger onValid function

Screenshots

Desktop (please complete the following information):

• OS: windows 10
• Browser chrome: 128
• Version latest

Smartphone (please complete the following information):

• Device: iPhone15
• OS: IOS 17
• Browser Chrome
• Version latest

Additional context
My solution is: add condition in onConnect

if (_piece?.puzzle?.valid) xxx

[flbulgarelli]

👋 Hi @lizyChy0329! Are you registering those events in a canvas or a puzzle? Puzzles don't trigger any validation events by default, so you still need to call validate(). On the other hand, Canvas do fire them when the drag movement ends.

In any case, validation by default does not prevent connection of pieces - and it is not intended to do so, so I don't completely grasp your if (_piece?.puzzle?.valid) xxx proposal.

Could you please further describe what you are trying to achieve? Also, could you please provide a (non) working sample? The screen recording you provided gives me an idea of what may be happening, but I'd need a little more context.

Thanks!

[lizyChy0329]

import {Canvas, outline, painters} from 'headbreaker';

watch(
    () => props.source,
    newSource => {
        const vangogh = new Image();
        vangogh.src = newSource;
        vangogh.onload = () => {
            const background = new Canvas('puzzle', {
                width: 640,
                height: 640,
                pieceSize: {x: 210, y: 141},
                proximity: 20,
                borderFill: 4,
                strokeWidth: 8,
                lineSoftness: 0.12,
                strokeColor: '#584a47',
                outline: new outline.Rounded(),
                image: vangogh,
                preventOffstageDrag: true,
                fixed: true,
                painter: new painters.Konva()
            });

            background.adjustImagesToPuzzleHeight();
            background.adjustImagesToPuzzleWidth();
            background.autogenerate({
                horizontalPiecesCount: 2,
                verticalPiecesCount: 2
                // insertsGenerator: headbreaker.generators.flipflop
            });
            background.shuffleGrid();
            background.draw();

            background.onConnect((_piece, figure, _target, targetFigure) => {
                figure.shape.stroke('#ffdb7a');
                targetFigure.shape.stroke('#ffdb7a');
                background.redraw();

                setTimeout(() => {
                    figure.shape.stroke('#584a47');
                    targetFigure.shape.stroke('#584a47');
                    background.redraw();
                }, 200);

				// To fix the special state: Drag piece but not end, no trigger onValid
                if (_piece?.puzzle?.valid) {
                    emit('update:modelValue', true);
                }
            });

            background.onDisconnect(() => {
                emit('update:modelValue', false);
            });

            background.attachSolvedValidator();
            background.onValid(() => {
                emit('update:modelValue', true);
            });
        };
    },
    {
        immediate: true
    }
);

1. The first time I finish puzzle trigger onValid √
2. Select a piece dragged out from the puzzle but don't drop! trigger onDisconnect
3. Don't drop until move in proximity range, drop it! trigger fail onValid ×