softwaretailoring / wheelnav

Animated wheel navigation JavaScript library based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.
https://wheelnavjs.softwaretailoring.net
MIT License
702 stars 101 forks source link

Changing In/Out Title and Angular2 #50

Closed MingC0re closed 7 years ago

MingC0re commented 7 years ago

Hi,

I have an application where I need to modify the In/Out Title and have it update. What is the proper way of changing and having it take affect? I tried the following but it doesn't seem to change.

this.wheelnav.spreaderInTitle = 'new TITLE';
this.wheelnav.refreshWheel();

Could you provide an example of how to setup a MenuSliceWithoutLine on the left/right corner so it only uses a total of 90 degrees of the screen instead of 360?

Is there a way to long press and short press feature?

Will you be porting this to Angular2 or 4?

Thanks in advance.

MingC0re commented 7 years ago

For MenuSliceWithoutLine is there a way to modify the size of the circle for the navItem? I tried titleRadius but it doesn't seem to do anything.

Not sure if I'm doing something wrong, but when I subscribe for the mouseover event, it doesn't seem to always fire. It almost seems like unless the text is clicked perfectly its not fired.

MingC0re commented 7 years ago

I notice the following Error when calling removeWheel(). Is there a specific setting or order for executing the command?

raphael.min.js:2 Error: attribute dy: Expected length, "NaN". n @ raphael.min.js:2 ot @ raphael.min.js:2 g @ raphael.min.js:2 r.attr @ raphael.min.js:2 or @ raphael.min.js:2 ZoneDelegate.invokeTask @ zone.js:365 onInvokeTask @ core.umd.js:9236 ZoneDelegate.invokeTask @ zone.js:364 Zone.runTask @ zone.js:265 ZoneTask.invoke @ zone.js:432

softwaretailoring commented 7 years ago

Spreader sample:

  wheel.spreader.inTitle.title = '1';
  wheel.spreader.outTitle.title = '2';
  wheel.refreshWheel();

MenuSliceWithoutLine sample:

  wheel.slicePathFunction = slicePath().MenuSliceWithoutLine;
  wheel.slicePathCustom = new MenuSliceCustomization();
  wheel.slicePathCustom.menuRadius = 40;
  wheel.sliceSelectedPathCustom = new MenuSliceCustomization();
  wheel.sliceSelectedPathCustom.menuRadius = 40;

  wheel.navItemsContinuous = true;
  wheel.sliceAngle = 45;
  wheel.navAngle = -90;
  wheel.clickModeRotate = false;

More custom property of menuslice can be found here

Here is a JS Bin with above samples.

Currently there is no way for long press and short press. I didn't plan to port it to Angular2, but I'll provide help if you think so. ;)

The remoteWheel must be call after createWheel. Please send me a sample with source if problem still exist.