## module:Box(appInstance, name, category, gridWidth, gridHeight)

Parent class for gates and input and output boxes. Defines all the factors that the boxes have in common (svgObj structure, draggability and rotatability...)

#### new module:Box(appInstance, name, category, gridWidth, gridHeight)
`modules/editorElements/Box.js`, `line 15`

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `appInstance` | App | instance of App
  `name` | string | name of the element (input, output, and, or, xor...)
  `category` | string | type of the element (io, gate)
  `gridWidth` | number | width of the element in grid pixels
  `gridHeight` | number | height of the element in grid pixels

### Extends

- NetworkElement

### Members

#### category :string
`modules/editorElements/Box.js`, `line 36`

  specifies the box category (io for input or output, gate for logic gates)

#### connectors :Array
`modules/editorElements/Box.js`, `line 48`

  array of connectors of this box

#### exportData
`modules/editorElements/Box.js`, `line 127`

  get data of this box as a JSON-ready object

#### gridHeight :number
`modules/editorElements/Box.js`, `line 76`

  height of this element in grid pixels

#### gridSize :number
`modules/editorElements/Box.js`, `line 42`

  size of the grid in SVG pixels

#### gridWidth :number
`modules/editorElements/Box.js`, `line 71`

  width of this element in grid pixels

#### height :number
`modules/editorElements/Box.js`, `line 65`

  height of this element in SVG pixels

#### inputConnectors
`modules/editorElements/Box.js`, `line 111`

  get all input connectors of this box

#### name :string
`modules/editorElements/Box.js`, `line 30`

  specifies the box type within the category (input/output in io, and/or/... in gate)

#### outputConnectors
`modules/editorElements/Box.js`, `line 119`

  get all output connectors of this box

#### svgObj :svgObj
`modules/editorElements/Box.js`, `line 54`

  svgObj containing all SVG data used to display this box

#### url :string
`modules/editorElements/Box.js`, `line 99`

  url of the image depicting this object

#### width :number
`modules/editorElements/Box.js`, `line 60`

  width of this element in SVG pixels

### Methods

#### addConnector(left, top, isInputConnector)
`modules/editorElements/Box.js`, `line 349`

  add a connector to the element on the specified position

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `left` | number | horizontal distance from the left edge of the element
  `top` | number | vertical distance from the top edge of the element
  `isInputConnector` | Boolean | whether or not should this connector an input connector (`true` for input connector, `false` for output connector)

#### addInputConnector(left, top)
`modules/editorElements/Box.js`, `line 364`

  add an input connector to the element on the specified position

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `left` | number | horizontal distance from the left edge of the element
  `top` | number | vertical distance from the top edge of the element

#### addOutputConnector(left, top)
`modules/editorElements/Box.js`, `line 373`

  add an output connector to the element on the specified position

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `left` | number | horizontal distance from the left edge of the element
  `top` | number | vertical distance from the top edge of the element

#### changeImage(suffixopt)
`modules/editorElements/Box.js`, `line 210`

  change image to another one that ends with a specified suffix

  usage: `changeImage("abc")` changes image url to `image-abc.svg`, `changeImage()` changes image url to the default one (`image.svg`)

  ##### Parameters:

  Name | Type | Attributes | Description
  --- | --- | --- | ---
  `suffix` | string | <optional> | new suffix for the image

#### generateBlockNodes(marginTopopt, marginRightopt, marginBottomopt, marginLeftopt, …specialNodes) → {Set}
`modules/editorElements/Box.js`, `line 173`

  get set of nodes that are not suitable for wire routing

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `marginTop` | Number | <optional> | 0 | top margin of the element (distance from the element that should be also blocked)
  `marginRight` | Number | <optional> | 0 | right margin of the element
  `marginBottom` | Number | <optional> | 0 | bottom margin of the element
  `marginLeft` | Number | <optional> | 0 | left margin of the element
  `specialNodes` | Number | <repeatable> |  | additional nodes that should be added to the set

  ##### Returns:

  Set -

  set of not suitable nodes

#### get() → {jQuery.element}
`modules/editorElements/Box.js`, `line 224`

  get a jQuery element representing this box

  ##### Returns:

  jQuery.element

#### getConnectorById(connectorId) → {Connector}
`modules/editorElements/Box.js`, `line 382`

  get the connector object based on its id

  ##### Parameters:

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

  ##### Returns:

  Connector -

  instance of the Connector or `undefined` if not found

#### getGridPixelTransform() → {Transform}
`modules/editorElements/Box.js`, `line 421`

  get the instance of Transform representing the state of the transform attribute of this element with lenght units in grid pixels

  ##### Returns:

  Transform -

  Transform of the element

#### getTransform(gridPixelsopt) → {Transform}
`modules/editorElements/Box.js`, `line 397`

  get the instance of Transform representing the state of the transform attribute of this element

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `gridPixels` | Boolean | <optional> | false | if `true`, function will return the result in grid pixels instead of SVG pixels

  ##### Returns:

  Transform -

  Transform of the element

#### onClick()
`modules/editorElements/Box.js`, `line 548`

  empty function, will be redefined in InputBox

#### onClickMiddle()
`modules/editorElements/Box.js`, `line 553`

  custom callback function for middle click that rotates the box by 90 degrees to the right

#### onDrop(event)
`modules/editorElements/Box.js`, `line 523`

  called by onMouseUp when the mouse has been moved between onMouseDown and onMouseUp

  applies grid snapping of the element on the end of the "drag and drop" action

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jQuery.MouseEvent |

#### onMouseDown(event)
`modules/editorElements/Box.js`, `line 439`

  function that is called on every mouse down on this element

  moves the element to the front and calls onMouseDownLeft if applicable

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jQuery.MouseEvent |

#### onMouseDownLeft(event)
`modules/editorElements/Box.js`, `line 456`

  function that is called on every left mouse down on this element

  prepares element for the "click" and "drag and drop" actions

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jQuery.MouseEvent |

#### onMouseMove(event)
`modules/editorElements/Box.js`, `line 478`

  function that is called on every left mouse move with this element applies the correct transform values to provide the "drag and drop" functionality

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jQuery.MouseEvent |

#### onMouseUp(event)
`modules/editorElements/Box.js`, `line 503`

  function that is called on every mouse up on this element provides the "click" functionality and calls the onDrop handler for the "drag and drop" functionality

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `event` | jQuery.MouseEvent |

#### refreshState()
`modules/editorElements/Box.js`, `line 199`

  empty function, redefined in inherited elements refreshState takes input connector values and sets output values accordingly

#### rotateBlockedNodes(right)
`modules/editorElements/Box.js`, `line 234`

  rotate the set of blocked nodes by 90 degrees to the right or to the left, depending on the parameter

  used to rotate the nodes when the object itself is rotated

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `right` | boolean | rotate clockwise if true, counterclockwise if false

#### rotateBlockedNodesLeft()
`modules/editorElements/Box.js`, `line 291`

  rotate the set of blocked nodes to the right

  used to rotate the nodes when the object itself is rotated

#### rotateBlockedNodesRight()
`modules/editorElements/Box.js`, `line 282`

  rotate the set of blocked nodes to the right

  used to rotate the nodes when the object itself is rotated

#### setTransform(transform)
`modules/editorElements/Box.js`, `line 429`

  set the transform attribute of this element

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `transform` | Transform | Transform of the element (with lengths specified in SVG pixels)

#### updateWires(temporaryopt)
`modules/editorElements/Box.js`, `line 566`

  Updates all wires connected to this box. Iterates over all wires that are connected to this box and calls routeWire (or temporaryWire if the `temporary` parameter is set to true) to update the wire routing

  ##### Parameters:

  Name | Type | Attributes | Default | Description
  --- | --- | --- | --- | ---
  `temporary` | Boolean | <optional> | false | [description]