Align outer cricle's navigation to inner circle's selected navigation

Question

This is my code for demonstration purposes https://jsbin.com/mugosec/65/edit?js,output

This is what I am trying to acheive: If I click on the inner circle, I want the visible nav items of the outer circle to center to the inner circle's nav item. So far I can successfully and consistently have the outer circle navItems start at the start of the inner circle nav item. I use the inner circle navitem's baseAngle + the outer circle's visible navItems degrees to arrange my outer circle appropriately.

let wheelSliceAngle = 360 / this.wheel.navItemCount;
let text_labels = (mod_options.length) + 1;
let subWheelSliceAngle = 360 / (sub_wheel_labels.length);
let labels_length = sub_wheel_labels.length
let non_text_labels = non_text_labels_length
let x  = (subWheelSliceAngle * non_text_labels);
let y = (subWheelSliceAngle * text_labels);
for (let portion of this.wheel.navItems) {
    console.log('portion baseAngle',portion)
    let sub_wheel_var = y
    let wheel_var = portion.baseAngle
    let angle = wheel_var + sub_wheel_var
    portion.sub_wheel = initSubWheel(this.wheel, angle);
    portion.sub_wheel.hide()
    let wheel_nav = portion;
    let _that = this;
    let old_refresh = wheel_nav.refreshNavItem;
    //     console.log(portion);
    wheel_nav.refreshNavItem = function() {
        old_refresh.apply(this, arguments);
    };
    wheel_nav.navigateFunction = function() {
        resetMarkers()
        this.wheelnav.hideSubMenus();
        full_portion_sub_wheel.hide()
        this.sub_wheel.show();
        setTimeout(() => {
            this.sub_wheel.navItems.map(x => x.selected = false);
            this.sub_wheel.navItems.forEach((v, i) => { v.setSelected() })
            this.refreshNavItem();
        }, 0)
    }
}

If I adjust the variables sub_wheel_var and wheel_var from:

let y = (subWheelSliceAngle * text_labels);
let sub_wheel_var = y
let wheel_var = portion.baseAngle
let angle = wheel_var + sub_wheel_var

to:

let y = (subWheelSliceAngle * text_labels);
let sub_wheel_var = y
let wheel_var = portion.navAngle
let angle = wheel_var + sub_wheel_var

I can have the OuterCircleNav start at the middle of the ICNI.

What I really would like to do is to have the OCN's middle match the ICNI's middle.

Doing this:

let y = (subWheelSliceAngle * text_labels);
let sub_wheel_var = y/2
let wheel_var = portion.navAngle
let angle = wheel_var + sub_wheel_var

Allows me to get close. The issue is that it's not quite accurate!!!! And no matter what I do, I can't get it to be dead center.

To mess around with the code easier, I've also added variables sections and extras to make it easier to add additional sections or additional outer nav elements respectively. Ive found that if I can get something working for one combination of sections and extras, a different combination will be skewed. I know that the answer lies in how I am calculating y, or subWheelSliceAngle, or sub_wheel_var.

Once more you may view the code here: https://jsbin.com/mugosec/65/edit?js,output

I would absolutely appreciate any and all help.

Thank you so much.

Answer 1

You have to use the navItemsContinuous property in initSubWheel.

  sub_wheel.navAngle = nav_angle-30;
  sub_wheel.sliceAngle = 30;
  sub_wheel.navItemsContinuous = true; 

Here is my modified bin: https://jsbin.com/bicunuqexu/edit?js,output