3.1 Core

Core

Parameters:

All the below parameters are optional and should be passed in an object.

• root: HTMLElement Where the Graphica window should bind relative to the HTML element it is instantiated in.

• disableControls: boolean Whether the controls should be disabled. This includes zooming/panning. Does not include GUI elements.

• defaultZoom: number Initial zoom value. Lower is more zoomed in, higher is more zoomed out.

• defaultPosition: InputPosition As of 1.0.6 not working.

• minZoom: number How far you are allowed to zoom in.

• maxZoom: number How far you are allowed to zoom out.

• autoStartClock: boolean Whether the clock should start by default. Note: If this is disabled animations depending on time will not work as it will be 0

Default Parameters:

  root: document.body,
  disableControls: false,
  defaultZoom: 50,
  defaultPosition: [0, 0],
  minZoom: 1,
  maxZoom: 500,
  autoStartClock: true,

Methods:

• add(component: Component) Adds a component to the Graphica component to be rendered upon running. The Z index of the position is determined by the order in which it was added. Meaning an object added later will be rendered on top of one added earlier.
• remove(component: Component) Removes a component from the Graphica component. Will stop rendering it.
• run(onUpdate?: (elapsedTime: number) => void) Render the content inside the Graphica component to the canvas. It is possible to pass in a function as an argument. It takes one argument, elapsedTime, which is the time since the clock started running.
• addGui(component: GuiComponent) Adds a GuiComponent to the Graphica component. Will be rendered upon running.
• removeGui(component: GuiComponent) Removes a GuiComponent from the Graphica component. Will stop rendering it.
• startClock(): void Starts the clock. Can be used to start the animation only after a buttonpress.
• stopClock(): void Stops the clock. This will reset the timer.
• enableControls(): void Enable the controls.
• disableControls(): void Disable the controls.
• getClockTime(): number Returns the current clock's elapsed time.