Menu Component

MenuComponent is a way to organize menu items in a bounded scrolling container. The container will automatically position and size the elements within it. The menu item is to be a custom component defined in your application (this may change and be an out of the box component).

Member Variables

  @Input() container: PIXI.Container = null;
  menuContainer: PIXI.Container;
  
  @Input() itemHeight = 200;
  @Input() itemWidth = 200;
  @Input() x = 0;
  @Input() y = 0;
  @Input() w = window.innerWidth;
  @Input() h = window.innerHeight;
  @Input() isGrid = false;
  @Input() isScrollable = true;
  
  dragPoint = {x: 0, y: 0};
  mouseDown = false;
  dragging = false;

Component Functions

  positionContainer()
  initMenuContainer()
  initInteraction()
  getViewport()
  distanceFromCenter(i: number)
  sizeItem(i: number) //Calculate appropriate scale for an item
  positionItems() //Position all items
  calculateItemPosition(i: number) //Calculate where an item should be on screen
  stageMouseDown(event: any) //(Possibly) start scrolling
  stageMouseUp(event: any) //Stop scrolling
  stageMove(event: any) //The scrolling handler
  calcPosition( oldP: any, newP: any ) //Calculate position for menu container itself (for scrolling)

Most of the component functions will happen behind the scenes out of the box, so you shouldn't have to manually call them to get the menu to work.

One important thing to note is the menu container is ignorant of it's children from an OOP sense and only has reference to the PIXI.Container's children. Only add what you'd consider as menu items to menuContainer