Menu

Menu of buttons

Code

export interface MenuItem {
  text: string; // menu action text
  icon?: string;  // optional material icon
  keycode: string; // display keyboard short-cut. blank if none
  enabled: boolean; // when false, button is disabled
  submenu?: Array<MenuItem>; // optional sub menu
  selected: () => void;  // callback when button selected
}

Inputs

Name	Type	Default	Description
menuitems	Array	empty	List of menu items
width	number	1	Width of menu in meters
height	number	<calculated>	Calculated height of menu in meters
rowheight	number	0.1	Height of each button in meters
rowspacing	number	0.01	Space between each button in meters
margin	number	0.03	Space around buttons in meters
selectable	InteractiveObjects	undefined	Add to list of objects ray caster can test for overlap

Outputs

None

Examples

<flat-ui-menu [menuitems]="menuitems" [selectable]="selectable"></flat-ui-menu>

  menuitems: Array<MenuItem> = [
    { text: 'Insert After', icon: 'add', enabled: true, submenu: this.actionmenu, selected: () => { this.showactions = true } },
    { text: 'Delete', icon: 'delete', enabled: true, selected: () => { } },
  ]

  actionmenu: Array<MenuItem> = [
    { text: 'M Move to', icon: '', enabled: true, selected: () => { } },
    { text: 'L Line to', icon: '', enabled: true, selected: () => { } },
    { text: 'V Vertical Line to', icon: '', enabled: true, selected: () => { } },
    { text: 'H Horizontal Line to', icon: '', enabled: true, selected: () => { } },
    { text: 'C Cubic Curve to', icon: '', enabled: true, selected: () => { } },
    { text: 'Q Bezier Curve to', icon: '', enabled: true, selected: () => { } },
    { text: 'A Elliptical Arc', icon: '', enabled: true, selected: () => { } },
    { text: 'Z Close Path', icon: '', enabled: true, selected: () => { } },
  ];