vue-draggable-resizable

vue-draggable-resizable copied to clipboard

There is something wrong when the grid x / y are on floating points.

A grid of: [25, 16.66666666667 (or just 16.67)] will prevent you from sometimes moving correctly towards the top (Y = 0).

For some reason the minTop is set to 16.67 at every first attempt, after that it works.

https://drive.google.com/uc?id=1vQkcs63p1zM3EH3I3IfdV1uiLzTuSWJ7

I havent found any issues as long as both x & y dont have decimals. But theres a lot of calculations going on, would you perhaps have a hunch as to where this goes wrong? Its most likely a division somewhere we need to round to 2 decimals e.g.:

 Math.round(X * 1e2) / 1e2;

update: the calcDragLimits uses modulo operators which does not work with floating point numbers, thinking of an alternative

replacing all modulo operations with: findMod(a, b) fixes it:

export function roundToNearestDecimals(val: number) {
    return Math.round(val * 1e2) / 1e2;
}

export function findMod(a: number, b: number) {
    let mod: number = 0;
    // Handling negative values
    if (a < 0) { mod = -a; } else { mod = a; }
    if (b < 0) { b = -b; }

    // Finding mod by repeated subtraction

    while (mod >= b) { mod = roundToNearestDecimals(mod - b); }

    // Sign of result typically depends
    // on sign of a.
    if (a < 0) { return -mod; }

    return mod;
}

@mauricius Dunno if youd accept this solution for floating point grids

Nvm trying to make this work with decimals is a pain haha ill change the way my grid dimensions are calculated