## module:App(canvas, gridSize)

Main class of the application. It represents an instance of the whole editor and holds references to all its elements.

#### new module:App(canvas, gridSize)
`modules/App.js`, `line 34`

  Initialize the Svg class

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `canvas` | string | query selector of the SVG element, that will contain all SVG content of the application
  `gridSize` | number | initial size of the grid in SVG pixels

### Members

#### $svg
`modules/App.js`, `line 44`

  jQuery element for the SVG document

#### boxes :Array
`modules/App.js`, `line 56`

  Array of all boxes (instances of objects derived from editorElements.Box) used on canvas

#### exportData
`modules/App.js`, `line 361`

  Generate an object containing export data for the canvas and all elements. Data from this function should cover all important information needed to import the network in a different session.

#### gridSize :number
`modules/App.js`, `line 50`

  space between grid lines in SVG pixels

#### height
`modules/App.js`, `line 221`

  Get the height of the main SVG element

#### leftTopPadding :number
`modules/App.js`, `line 78`

  distance from the left top corner to the first element in the imported network and distance from the left top corner to the imported black box in grid pixels

#### messages :Messages
`modules/App.js`, `line 68`

  Interface for showing messages to the user

#### tutorial :Tutorial
`modules/App.js`, `line 197`

  property containing an instance of Tutorial, if there is any

#### width
`modules/App.js`, `line 213`

  Get the width of the main SVG element

#### wires :Array
`modules/App.js`, `line 62`

  Array of all wires (instances of editorElements.Wire) used on canvas

#### zoom
`modules/App.js`, `line 319`

  Get the current zoom multiplier of the canvas

#### zoom
`modules/App.js`, `line 328`

  Set the zoom multiplier of the canvas. I sets the viewbox zoom and then applies the new value by calling this.applyViewbox()

### Methods

#### static snapToGrid(value, gridSize) → {number}
`modules/App.js`, `line 1296`

  static function for snapping a value to a grid

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `value` | number | value in SVG pixels
  `gridSize` | number | size of the grid in SVG pixels

  ##### Returns:

  number -

  the value rounded to the closest number divisible by the grid size

#### addPattern(pattern)
`modules/App.js`, `line 1228`

  Add a new pattern to the definitions element in the SVG document

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `pattern` | svgObj.Pattern | pattern that will be added to the element in the SVG document

#### appendElement(element, refreshopt)
`modules/App.js`, `line 1210`

  Add an element to the canvas

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `element` | editorElements.NetworkElement |  |  | Element that will be added on the canvas
  `refresh` | Boolean | <optional> | true | if true, the SVG document will be reloaded after adding this element

#### appendJQueryObject(object, refreshopt)
`modules/App.js`, `line 1219`

  Append a jQuery element to the SVG document (helper for this.appendElement)

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `object` | object |  |  | jQuery element that will be added to the SVG document
  `refresh` | Boolean | <optional> | true | if true, the SVG document will be reloaded after adding this element

#### applyViewbox()
`modules/App.js`, `line 302`

  Set the viewBox attribute of the SVG element and size and position attributes of the rectangle with the background grid to match the values in this.viewbox

#### cancelWireCreation()
`modules/App.js`, `line 737`

  helper for wireCreationHelper that cancels the wire creation process

#### cleanCanvas()
`modules/App.js`, `line 863`

  Remove all boxes from the canvas

#### displayContextMenu(x, y, $target)
`modules/App.js`, `line 1247`

  Display the context menu on the specified position

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `x` | number | horizontal position in CSS pixels
  `y` | number | vertical position in CSS pixels
  `$target` | jQuery.element | the item user clicked on (used to display "remove this element"-type items in the menu)

#### displayCreatedWire(mousePosition)
`modules/App.js`, `line 702`

  helper for wireCreationHelper that displays a grey wire between the first connector and the specified mousePosition

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `mousePosition` | Object | object with x and y coordinates in SVG pixels

#### getBoxByConnectorId(boxId) → {editorElements.Box}
`modules/App.js`, `line 1103`

  Find the correct instance of editorElements.Box in the app's boxes by ID of a connector that belongs to this box

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `boxId` | string | id of the connector

  ##### Returns:

  editorElements.Box -

  instance of the box

#### getBoxById(boxId) → {editorElements.Box}
`modules/App.js`, `line 1089`

  Find the correct instance of editorElements.Box in the app's boxes by the provided id

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `boxId` | string | id of the box

  ##### Returns:

  editorElements.Box -

  instance of the box

#### getConnectorById(connectorId, wireopt) → {editorElements.Connector}
`modules/App.js`, `line 1121`

  Get instance of a connector based on it's ID (and also on an instance of editorElements.Wire if provided)

  The wire variable is used as heuristic: When we know the wire, we have to check only two gates instead of all of them

  ##### Parameters:

  Name | Type | Attributes | Description
  --- | --- | --- | ---
  `connectorId` | string |  | id of the connector
  `wire` | editorElements.Wire | <optional> | instance of the Wire that is connected to this connector

  ##### Returns:

  editorElements.Connector -

  instance of the connector

#### getConnectorPosition(connector, snapToGridopt) → {Object}
`modules/App.js`, `line 919`

  get the coordinates of the specified connector

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `connector` | Connector |  |  | instance of Connector
  `snapToGrid` | Boolean | <optional> | true | if true, the connector position will be snapped to the grid

  ##### Returns:

  Object -

  point - object containing numeric attributes `x` and `y`

#### getInconvenientNodes() → {Set}
`modules/App.js`, `line 1377`

  get set of nodes, that are inconvenient for wiring, but can be used, just are not preferred

  ##### Returns:

  Set -

  set of nodes (objects containing x and y coordinates) that are not preferred for wiring

#### getNonRoutableNodes() → {Set}
`modules/App.js`, `line 1320`

  get set of nodes, that cannot be used for wiring at any circumstances

  ##### Returns:

  Set -

  set of nodes (objects containing x and y coordinates) that are not suitable for wiring

#### getRealJQueryTarget(target) → {target}
`modules/App.js`, `line 1150`

  Get the logical jQuery target based on the factual jQuery target.

  If the object, that user interacted with, is not a connector and is in a group, return the group jQuery object instead of the original jQuery object.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `target` | target | jQuery target of the object user interacted with

  ##### Returns:

  target -

  jQuery target of the object user wanted to interact with

#### getRealTarget(target) → {editorElements.NetworkElement}
`modules/App.js`, `line 1167`

  Get instance of some object from editorElement based on the jQuery target

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `target` | target | jQuery target that user interacted with

  ##### Returns:

  editorElements.NetworkElement -

  instance of an object derived from editorElements.NetworkElement that the user interacted with

#### getWireById(wireId) → {editorElements.Wire}
`modules/App.js`, `line 1000`

  Find the correct instance of editorElements.Wire in the app's wires by the provided id

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `wireId` | string | id of the wire

  ##### Returns:

  editorElements.Wire -

  instance of the wire

#### getWiresByConnectorId(connectorId) → {Set}
`modules/App.js`, `line 1015`

  Find all wires that are connected to the specified connector

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `connectorId` | string | id of the connector

  ##### Returns:

  Set -

  set of ID's of the wires connected to this connector

#### gridToSVG(value) → {number}
`modules/App.js`, `line 1277`

  convert grid pixels to SVG pixels

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `value` | number | distance in grid pixels

  ##### Returns:

  number -

  distance in SVG pixels

#### hideContextMenu()
`modules/App.js`, `line 1259`

  hide the context menu

#### hideCreatedWire()
`modules/App.js`, `line 727`

  helper for wireCreationHelper that hides the temporary wire when wire creation is done

#### importData(data, xopt, yopt)
`modules/App.js`, `line 382`

  Recreate a logic network from the data provided

  ##### Parameters:

  Name | Type | Attributes | Description
  --- | --- | --- | ---
  `data` | object |  | object containing information about the imported network
  `x` | number | <optional> | horizontal position of the left top corner of the network in grid pixels
  `y` | number | <optional> | vertical position of the left top corner of the network in grid pixels

#### moveToBackById(objId)
`modules/App.js`, `line 1312`

  move an element to the back in the canvas

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `objId` | string | id of the element

#### moveToFrontById(objId)
`modules/App.js`, `line 1304`

  move an element to the front in the canvas

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `objId` | string | id of the element

#### newBlackbox(x, y, inputs, outputs, table, name, refreshopt) → {editorElements.Blackbox}
`modules/App.js`, `line 960`

  creates a new blackbox

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `x` | number |  |  | horizontal position of the blackbox in SVG pixels
  `y` | number |  |  | vertical position of the gate in SVG pixels
  `inputs` | number |  |  | number of input pins of this blackbox
  `outputs` | number |  |  | number of output pins of this blackbox
  `table` | Array |  |  | Array of arrays, each inner array contains list of Logic.states, that describe the combination of input pin and output pin states in the order from the top to bottom for both input and output connectors. If we had an AND array as a blackbox, one of the states could be `[Logic.state.on, Logic.state.off, Logic.state.off]` which means that if the first input connector is in the `on` state and the second connector is in the `off` state, the state of the output connector will be `off`. The array can be described as `[state for input conn 1, state for input conn 2, ..., state for output conn 1, state for output conn 2 ...]`.
  `name` | string |  |  | a name that will be displayed on the blackbox
  `refresh` | boolean | <optional> | true | if true, this.refresh() will be called after adding the gate

  ##### Returns:

  editorElements.Blackbox -

  instance of Blackbox that has been added to the canvas

#### newBox(x, y, object, refreshopt) → {editorElements.Box}
`modules/App.js`, `line 802`

  Add a new Box to the canvas

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `x` | number |  |  | horizontal position of the box in SVG pixels
  `y` | number |  |  | vertical position of the box in SVG pixels
  `object` | editorElements.Box |  |  | instance of an object derived from the editorElements.Box class
  `refresh` | Boolean | <optional> | true | if true, this.refresh() will be called after adding the box

  ##### Returns:

  editorElements.Box -

  return the instance of the newly added object

#### newGate(name, x, y, refreshopt) → {editorElements.Gate}
`modules/App.js`, `line 767`

  Create a new gate on the specified position

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `name` | string |  |  | type of the gate (and, or ...)
  `x` | number |  |  | horizontal position of the gate in SVG pixels
  `y` | number |  |  | vertical position of the gate in SVG pixels
  `refresh` | boolean | <optional> | true | if true, this.refresh() will be called after adding the gate

  ##### Returns:

  editorElements.Gate -

  instance of Gate that has been newly added

#### newInput(x, y, isOnopt, refreshopt) → {editorElements.InputBox}
`modules/App.js`, `line 779`

  Create an input box on the specified position

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `x` | number |  |  | horizontal position of the gate in SVG pixels
  `y` | number |  |  | vertical position of the gate in SVG pixels
  `isOn` | boolean | <optional> | false | state of the input box (default is false (off))
  `refresh` | boolean | <optional> | true | if true, this.refresh() will be called after adding the input box

  ##### Returns:

  editorElements.InputBox -

  instance of the InputBox that has been newly added

#### newOutput(x, y, refreshopt) → {editorElements.InputBox}
`modules/App.js`, `line 790`

  Create an output box on the specified position

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `x` | number |  |  | horizontal position of the gate in SVG pixels
  `y` | number |  |  | vertical position of the gate in SVG pixels
  `refresh` | boolean | <optional> | true | if true, this.refresh() will be called after adding the output box

  ##### Returns:

  editorElements.InputBox -

  instance of the OutputBox that has been newly added

#### newWire(fromId, toId, refreshopt) → {editorElements.Wire}
`modules/App.js`, `line 882`

  Create a new wire connecting the provided connectors

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `fromId` | string |  |  | id of the connector that the wire is attached to
  `toId` | string |  |  | id of the connector that the wire is attached to
  `refresh` | Boolean | <optional> | true | if refresh is set to true, the SVG document will be reloaded after adding the wire

  ##### Returns:

  editorElements.Wire -

  instance of editorElements.Wire that has been added to the canvas

#### onKeyDown(event)
`modules/App.js`, `line 229`

  Process all keydown events that are connected to the app

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jquery.KeyboardEvent | KeyboardEvent generated by a listener

#### onKeyUp(event)
`modules/App.js`, `line 239`

  Process all keyup events that are connected to the app

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jquery.KeyboardEvent | KeyboardEvent generated by a listener

#### onMouseDown(event)
`modules/App.js`, `line 249`

  Process all mousedown events that are happening directly on the canvas

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jquery.MouseEvent | MouseEvent generated by a listener

#### onMouseMove(event)
`modules/App.js`, `line 267`

  Process all mousemove events that are happening directly on the canvas

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jquery.MouseEvent | MouseEvent generated by a listener

#### onMouseUp()
`modules/App.js`, `line 286`

  Process all mouseup events that are happening directly on the canvas

#### refresh()
`modules/App.js`, `line 1236`

  Reload the SVG document (needed to display a newly appended jQuery object)

#### removeBox(boxId)
`modules/App.js`, `line 829`

  Remove a box from canvas based on the provided ID

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `boxId` | string | id of the box that should be removed

#### removeWireById(wireId)
`modules/App.js`, `line 1024`

  Remove wire that has the provided ID

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `wireId` | string | ID of the wire that should be removed

#### removeWiresByConnectorId(connectorId)
`modules/App.js`, `line 1051`

  Remove all wires that are connected to the connector provided by its ID

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `connectorId` | string | ID of the connector

#### snapToGrid(value) → {number}
`modules/App.js`, `line 1268`

  snap a value to a grid

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `value` | number | value in SVG pixels

  ##### Returns:

  number -

  the value rounded to the closest number divisible by the grid size

#### startNewSimulation(startingConnector, state)
`modules/App.js`, `line 751`

  Run a logic simulation from the startingConnector. This refreshes the states of all elements in the network whose inputs are directly (or by transition) connected to startingConnector's output

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `startingConnector` | OutputConnector | run simulation from this output connector
  `state` | Logic.state | new state of the startingConnector

#### startTutorial()
`modules/App.js`, `line 341`

  start the tutorial

#### SVGToGrid(value) → {number}
`modules/App.js`, `line 1286`

  convert SVG pixels to grid pixels

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `value` | number | distance in SVG pixels

  ##### Returns:

  number -

  distance in grud pixels

#### wireCreationHelper(connectorId)
`modules/App.js`, `line 680`

  When user clicks on a connector, remember it until they click on some other connector. Than call newWire with the last two connectors ids as arguments. Visualize the process by displaying a grey wire between the first conenctor and the mouse pointer.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `connectorId` | string | id of the connector that the user clicked on