Icon's position messed up when using sliceTransform with DonutSlice

[shashi-we]

Hello @softwaretailoring

Thanks for this amazing plugin. I am facing an issue in a specific case. I need to use DonutSlice for client's requirement with transformation feature. When I tried to implement this particular case, what I can see is that icons are not in place on slice hover. I am using following code:

var wheel = new wheelnav('wheelNav');
wheel.clockwise = true;
wheel.sliceHoverTransformFunction = sliceTransform().MoveMiddleTransform;
wheel.initPercent = 0.1;
wheel.wheelRadius = wheel.wheelRadius * 0.8;
wheel.navItemsContinuous = true;
wheel.rotateRound = false;
wheel.animatetime = 600;
wheel.animateeffect = 'ease-in-out';
wheel.slicePathFunction = slicePath().DonutSlice;
wheel.cssMode = false;
wheel.selectedPercent = 1;
wheel.clickModeRotate = false;
wheel.createWheel([icon.magic, icon.volume0, icon.volume1, icon.volume2, icon.volume3]);

I tried it with WheelSlice and it worked with that without this issue.

It would be great to have any help regarding this.

Thanks

[softwaretailoring]

Hi @shashi-we The MoveMiddleTransform is a little bit strange. It works well with titleRotateAngle. I've comitted a new version, where you can set unique titleRotateAngle for each navItem and MoveMiddleTransform will be fine.

  wheel.initWheel([icon.magic, icon.volume0, icon.volume1, icon.volume2, icon.volume3]);
  wheel.navItems[0].titleRotateAngle = 0;
  wheel.navItems[1].titleRotateAngle = -72;
  wheel.navItems[2].titleRotateAngle = -144;
  wheel.navItems[3].titleRotateAngle = -216;
  wheel.navItems[4].titleRotateAngle = -288;
  wheel.createWheel();

Here is a JS Bin for demo.

[shashi-we]

@softwaretailoring sorry for late reply. I tried your solution and it worked nicely. Thanks :+1:

[softwaretailoring]

You're welcome. May I check your client's website with wheelnav?

[shashi-we]

It's on staging right now, once live I'll definitely share with you.

[shashi-we]

@softwaretailoring here it is https://www.catalina-software.co.uk/ :) :+1:

[softwaretailoring]

Hi @shashi-we Thank you for sharing the link! I've added this site to World Wide Wheel section: http://wheelnavjs.softwaretailoring.net/spinit.html#worldwidewheel I hope it's ok.