Angular Pie

Installation

npm i angular-pie

Usage

Import the AngularPieComponent to app.modules.ts.

import { AngularPieComponent } from 'angular-pie';

@NgModule({
  declarations: [... , AngularPieComponent],
})

Add <lib-angular-pie></lib-angular-pie> to the app.component.html, then add a mousedown event to call the menu.

<div (mousedown)="callPie($event)" [style.width.px]="'100%'" [style.height.px]="'100%'">
  <lib-angular-pie></lib-angular-pie>
</div>

Import the AngularPieService to the app.component.ts, then create a call function, add the pie slices and options.

import { Component } from '@angular/core';
import { AngularPieService, PieOptions, PieSlice } from 'angular-pie';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
    pieSlices: PieSlice[] = [{ title: 'Slice 1' }, { title: 'Slice 2' }, { title: 'Slice 3' }, { title: 'Slice 4' }];
    pieOptions: PieOptions = {};
    constructor(pie: AngularPieService) {}

    callPieMenu(event: MouseEvent) {

        this.pie.call(event: MouseEvent, this.pieSlices: PieSlice[], this.pieOptions: PieOptions);
    }
}

Slice Functions

Adding functions to a slice is simple, create a function, then add the function name, arguments and execution context to to slice that will activate the function.

Note: the context argument is set to this in this example because the function is part of this.

pieSliceWithFunction: PieSlice = { title: 'Slice 1', func: 'sliceFunction', args: ['string arg', 123], context: this }
pieSliceWithFunction2: PieSlice = { title: 'Slice 2', func: 'sliceFunction', args: ['different String', 321], context: this }
pieSlices: PieSlice[] = [ this.pieSliceWithFunction, this.pieSliceWithFunction2, { title: 'Slice 3' }, { title: 'Slice 4' }];

pieOptions: PieOptions = {};

constructor(private pie: AngularPieService) {}

callPie(event) {
    this.pie.call(event, this.pieSlices, this, this.pieOptions);
}

public sliceFunction(stringArg, numberArg) {
    console.log(stringArg);
    console.log(numberArg);
}

Pie Options

| Name | Type | Default | Description | | --------------------------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | borderColor | string | #334157 | Slice border color when not Selected, Color in hex format. | | borderColorHover | string | #517197 | Slice border color when Selected, Color in hex format. | | borderWidth | number | 2 | Width of Slice Border, in pixel. | | borderRadius | number | 12 | Slice border Radius, in pixel. | | color | string | #151619 | Color when slice is Not active or Selected, Color in hex format. | | colorHover | string | #334157 | Color when slice is selected, Color in hex format. | | colorActive | string | #5595ee | Color when slice is Active, Color in hex format. | | circleBorderColor | string | #151619 | Color if the inner circle border, Color in hex format. | | circleBackgroundColor | string | #00000000 | Color of the inner circle transparent by default, Color in hex format. | | circleBorderWidth | number | 2 | Width of the inner circle border, in pixel. | | oneActiveColor | boolean | true | If true the border color will change to the active color (colorActive) when activated, Else the border color remains the same. | | font | string | Verdana | Font family of slice title. | | fontColor | string | #eee | Font Color of slice title. | | fontSize | string | 1 | Font size of slice title, in rem. | | size | number | 180 | Size of slice container, in pixel | | circleSize | number | 80 | Size of the inner circle in, in pixel. | | sliceX | number | 100 | Slice width in pixel. | | sliceY | number | 24 | Slice height in pixel. | | hideDelay | number | 200 | Time the menu stays open after activation, in milliseconds. | | round | boolean | false | Slice width in pixel. | | selectionDistance | number | 40 | Selection Distance, in pixel. | | activationDistance | number | 60 | Activation Distance, in pixel, only acitve if activateAfterActivationDistance is set to true. | | activationColorDistance | number | 55 | Active color activation disatance, in pixel, only acitve if activateAfterActivationDistance is set to true. | | activateAfterActivationDistance | boolean | false | If true the menu gets activated after the activationDistance. | | disableInnerMouseleaveActivation | boolean | true | If false the pie menu gets activated when the cursor leaves the inner circle. | | disableMouseUpActivation | boolean | true | If false the pie menu gets activated when the mouse up event gets fired outside the inner circle. | | disableCircleMousedownActvivation | boolean | true | If false the pie menu gets activated when the mouse down event gets fired in the inner circle. | | disableOuterActivation | boolean | false | If false the pie menu gets activated when the cursor leaves the outer circle, the outer circle width is size + SliceX same for the height. | | disableInnnerMouseup | boolean | false | If false the pie menu get activated when the mouse up event gets fired in the inner circle. |

Pie Slice Options

| Name | Optional | Type | Description | | ---------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title | No | string | Slice Title. | | func | Yes | string | Function Name of the function that gets fired when this slice gets activated.expected format is 'example' or 'function.example' do NOT include parentheses. arguments are passed in the args parameter. | | args | Yes | any[ ] | Function Arguments if the function that gets fired when this slice gets activated. expected format is ['arg1', 2, {arg: 3}] | | context | Yes | any | Function Execution Context. | | disableImg | Yes | boolean | False by default, only enable when an image is nedded. | | imgData | Yes | Custom { } | Used to set the image properties of this slice. |

imgData Object

| Name | Optional | Type | Description | | ------ | -------- | ------ | ------------------------------------------ | | src | No | string | Image Source | | left | Yes | number | Left position relative to Slice, in pixel. | | top | Yes | number | Top position relative to Slice, in pixel. | | height | Yes | number | Image height, in pixel. | | width | Yes | number | Image width, in pixel. |