opt-pan / penpa-edit

MIT License
29 stars 22 forks source link

Key_arrow code for class_uniform.js #9

Open swaroopg92 opened 4 years ago

swaroopg92 commented 4 years ago

They arrow key direction from the keyboard was missing for Cube Grid. I have developed the following code. Works for normal orientation and Flip. (doesn't work if theta=60 or 90), but I don't think anyone uses or prefers that orientation anyways. I hope this helps.

key_arrow(key_code) {
        var a, b, c;
        b = [0, 1, 2, 3];
        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;
        }
        var quotient = parseInt(this.cursol / 27);
        if (this.mode[this.mode.qa].edit_mode === "number" || this.mode[this.mode.qa].edit_mode === "symbol") {
            if (this.cursol % 27 === 0) { // top side
                switch (c) {
                    case 0: //left
                        // if cursor already on the left border
                        if (quotient % this.nx0 === 0) {
                            a = this.cursol + 1;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        } else {
                            a = this.cursol - 27;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        }
                        break;
                    case 1: //up
                        a = this.cursol + 27 * this.nx0;
                        if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 2: //right
                        a = this.cursol + 27;
                        if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 3: //down
                        // if cursor already on the bottom border
                        if (quotient < this.nx0) {
                            a = this.cursol * this.nx0 + 2;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        } else {
                            a = this.cursol - 27 * this.nx0;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        }
                        break;
                }
            } else if (this.cursol % 27 === 1) { // left side
                switch (c) {
                    case 0: //left
                        a = this.cursol + 27 * this.nx0;
                        if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 1: //up
                        // if cursor already on the up border
                        if (quotient % this.nx0 === 0) {
                            a = this.cursol - 1;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        } else {
                            a = this.cursol - 27;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        }
                        break;
                    case 2: //right
                        // if cursor already on the right border
                        if (quotient < this.nx0) {
                            a = this.cursol + 1;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        } else {
                            a = this.cursol - 27 * this.nx0;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        }
                        break;
                    case 3: //down
                        a = this.cursol + 27;
                        if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        break;
                }
            } else if (this.cursol % 27 === 2) { // right side
                switch (c) {
                    case 0: //left
                        // if cursor already on the left border
                        if (quotient < this.nx0) {
                            a = this.cursol - 1;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        } else {
                            a = this.cursol - 27 * this.nx0;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        }
                        break;
                    case 1: //up
                        // if cursor already on the up border
                        if (quotient % this.nx0 === 0) {
                            a = parseInt((this.cursol - 2) / this.nx0);
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        } else {
                            a = this.cursol - 27;
                            if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        }
                        break;
                    case 2: //right
                        a = this.cursol + 27 * this.nx0;
                        if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        break;
                    case 3: //down
                        a = this.cursol + 27;
                        if (this.point[a] && this.point[a].use === 1) { this.cursol = a; }
                        break;
                }
            }
        }
        this.redraw();
    }
swaroopg92 commented 4 years ago

I hardcoded "27" based on observation. Was not sure which variable contains that value. So you can update that part accordingly.

opt-pan commented 4 years ago

Thank you swaroopg92. I have just avoided developing it because it was too complex.

This code works fine on normal orientation, but it also doesn't work on theta=120 or 240 (visually the same orientation). I would like to introduce it as soon as it is fixed. These types of bugs are still remain on other grids...

opt-pan commented 4 years ago

Also, in some orientation, the cursol jump to other lines. (Sorry, it's because of the complexity of the assigned number.)

swaroopg92 commented 4 years ago

Thanks. Yeah, I agree, Theta is complex to handle. I tried dealing with orientation, but couldn't understand or crack the logic. So I thought instead of having nothing, at least it will help in the normal orientation, so did it anyway.