Key Arrow for Hex Grid

[swaroopg92]

Hi opt-pan, I have improved the key_arrow code for it to work in all orientations in a consistent way. Feel free to use the following code.

key_arrow(key_code) {
        var a, b, c;
        console.log(this.theta);
        if (parseInt(this.theta / 60) === 0) { // 0, 30
            b = [0, 1, 2, 3];
        } else if (parseInt(this.theta / 60) === 1) { // 60, 90
            b = [4, 0, 5, 2];
        } else if (parseInt(this.theta / 60) === 2) { // 120, 150
            b = [3, 4, 1, 5];
        } else if (parseInt(this.theta / 60) === 3) { // 180, 210
            b = [2, 3, 0, 1];
        } else if (parseInt(this.theta / 60) === 4) { // 240, 270
            b = [5, 2, 4, 0];
        } else if (parseInt(this.theta / 60) === 5) { // 300, 330
            b = [1, 5, 3, 4];
        }

        if (this.reflect[0] === -1) {
            c = b[0];
            b[0] = b[2];
            b[2] = c;
        }
        if (this.reflect[1] === -1) {
            c = b[1];
            b[1] = b[3];
            b[3] = c;
        }
        switch (key_code) {
            case "ArrowLeft":
                c = b[0];
                break;
            case "ArrowUp":
                c = b[1];
                break;
            case "ArrowRight":
                c = b[2];
                break;
            case "ArrowDown":
                c = b[3];
                break;
        }

        // Calculate 1st cell
        let first_gridcell = Math.min(...this.centerlist);
        let first_canvascell;
        if ((this.nx % 2) === 1) {
            first_canvascell = first_gridcell - (this.nx * 3 + 2) - Math.ceil(this.nx / 2) + 1;
        } else {
            first_canvascell = first_gridcell - (this.nx * 3 + 1) - Math.ceil(this.nx / 2) + 1;
        }

        // Find the row of cursol
        let count = 1;
        let cursorpos = this.cursol;
        while ((cursorpos - 3 * this.nx) > first_canvascell) {
            count = count + 1;
            cursorpos = cursorpos - 3 * this.nx - 1;
        }

        if (this.mode[this.mode.qa].edit_mode === "number" || this.mode[this.mode.qa].edit_mode === "symbol") {
            if (this.mode[this.mode.qa].edit_mode === "number" && this.mode[this.mode.qa][this.mode[this.mode.qa].edit_mode][0] === "3") {} else {
                switch (c) {
                    case 0: // right to left for theta = 0
                        a = this.cursol - 1;
                        if (this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 1: // bottom right to top left for theta = 0
                        if ((this.nx % 2) === 0) {
                            if ((count % 2) === 0) {
                                a = this.cursol - (this.nx * 3 + 1);
                            } else {
                                a = this.cursol - (this.nx * 3 + 2);
                            }
                        } else {
                            if ((count % 2) === 0) {
                                a = this.cursol - (this.nx * 3 + 2);
                            } else {
                                a = this.cursol - (this.nx * 3 + 1);
                            }
                        }
                        if (this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 2: // left to right for theta = 0
                        a = this.cursol + 1;
                        if (this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 3: // top left to bottom right for theta = 0
                        if ((this.nx % 2) === 0) {
                            if ((count % 2) === 1) {
                                a = this.cursol + (this.nx * 3 + 1);
                            } else {
                                a = this.cursol + (this.nx * 3 + 2);
                            }
                        } else {
                            if ((count % 2) === 1) {
                                a = this.cursol + (this.nx * 3 + 2);
                            } else {
                                a = this.cursol + (this.nx * 3 + 1);
                            }
                        }
                        if (this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 4: // top right to bottom left for theta = 0
                        if ((this.nx % 2) === 0) {
                            if ((count % 2) === 1) {
                                a = this.cursol + (this.nx * 3);
                            } else {
                                a = this.cursol + (this.nx * 3 + 1);
                            }
                        } else {
                            if ((count % 2) === 1) {
                                a = this.cursol + (this.nx * 3 + 1);
                            } else {
                                a = this.cursol + (this.nx * 3);
                            }
                        }
                        if (this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 5: // bottom left to top right for theta = 0
                        if ((this.nx % 2) === 0) {
                            if ((count % 2) === 0) {
                                a = this.cursol - (this.nx * 3);
                            } else {
                                a = this.cursol - (this.nx * 3 + 1);
                            }
                        } else {
                            if ((count % 2) === 0) {
                                a = this.cursol - (this.nx * 3 + 1);
                            } else {
                                a = this.cursol - (this.nx * 3);
                            }
                        }
                        if (this.point[a].use === 1) { this.cursol = a; }
                        break;
                }
            }
        }
        this.redraw();
    }

Regards