Class: Canvas

Canvas(id, options)

An HTML graphical area where puzzles and pieces can be rendered. No assumption of the rendering backend is done - it may be and be a plain HTML SVG or canvas element, or a higher-level library - and this task is fully delegated to Painter

Constructor

new Canvas(id, options)

Parameters:
Name Type Description
id string the html id of the element where to place the canvas
options object
Properties
Name Type Attributes Description
width number
height number
pieceSize Vector | number <optional>
 the piece size expresed as it edge-to-edge diameter
proximity number <optional>
borderFill Vector | number <optional>
 the broder fill of the pieces, expresed in pixels. 0 means no border fill, 0.5 * pieceSize means full fill
strokeWidth number <optional>
strokeColor string <optional>
lineSoftness number <optional>
 how soft the line will be
preventOffstageDrag boolean <optional>
 whether dragging out of canvas is prevented
image ImageLike <optional>
 an optional background image for the puzzle that will be split across all pieces.
fixed boolean <optional>
 whether the canvas can is fixed or can be dragged
painter Painter <optional>
 the Painter object used to actually draw figures in canvas
puzzleDiameter Vector | number <optional>
 the puzzle diameter used to calculate the maximal width and height You only need to specify this option when pieces are manually sketched and images must be adjusted
maxPiecesCount Vector | number <optional>
 the maximal amount of pieces used to calculate the maximal width and height. You only need to specify this option when pieces are manually sketched and images must be adjusted
outline Outline <optional>
Source:

Members

_figurePadding :Vector

Type:
Source:

_imageAdjuster

Source:

_maxPiecesCount :Vector

Type:
Source:

_painter :Painter

Type:
Source:

_puzzle :Puzzle

Type:
Source:

_puzzleDiameter :Vector

Type:
Source:

estimatedPuzzleDiameter :Vector

The estimated puzzle diameter calculated using the the max pieces count.
Type:
Source:

figurePadding :Vector

Type:
Source:

figures :Object.<string, Figure>

Type:
Source:

figuresCount :Number

Type:
  • Number
Source:

pieceDiameter :Vector

Type:
Source:

pieceRadius :Vector

Type:
Source:

puzzle :Puzzle

The puzzle rendered by this canvas
Type:
Source:

puzzleDiameter :Vector

The puzzle diameter, using the configured puzzle diameter or the estimated one, if the first is not available.
Type:
Source:

settings :Settings

Type:
Source:

templates :Object.<string, Template>

Type:
Source:

valid :boolean

Returns the current validation status
Type:
  • boolean
Source:

Methods

_annotatePiecePosition(piece)

Parameters:
Name Type Description
piece Piece
Source:

_baseImageMetadataFor(piece) → {ImageMetadata}

Parameters:
Name Type Description
piece Piece
Source:
Returns:
Type
ImageMetadata

_bindGroupToPiece(group, piece)

Configures updates from piece into group
Parameters:
Name Type Description
group Group
piece Piece
Source:

_bindPieceToGroup(piece, group)

* Configures updates from group into piece
Parameters:
Name Type Description
piece Piece
group Group
Source:

_newPiece(structureLike, size, metadata)

Parameters:
Name Type Description
structureLike StructureLike the piece structure
size Size
metadata CanvasMetadata
Source:

adjustImagesToPiece(axis)

Configures canvas to adjust images axis to pieces's axis **Warning**: this method requires {@code maxPiecesCount} or {@code puzzleDiameter} to be set.
Parameters:
Name Type Description
axis Axis
Source:

adjustImagesToPieceHeight()

Configures canvas to adjust images height to pieces's height **Warning**: this method requires {@code maxPiecesCount} or {@code puzzleDiameter} to be set.
Source:

adjustImagesToPieceWidth()

Configures canvas to adjust images width to pieces's width **Warning**: this method requires {@code maxPiecesCount} or {@code puzzleDiameter} to be set.
Source:

adjustImagesToPuzzle(axis)

Configures canvas to adjust images axis to puzzle's axis. **Warning**: this method requires {@code maxPiecesCount} or {@code puzzleDiameter} to be set.
Parameters:
Name Type Description
axis Axis
Source:

adjustImagesToPuzzleHeight()

Configures canvas to adjust images height to puzzle's height **Warning**: this method requires {@code maxPiecesCount} or {@code puzzleDiameter} to be set.
Source:

adjustImagesToPuzzleWidth()

Configures canvas to adjust images width to puzzle's width **Warning**: this method requires {@code maxPiecesCount} or {@code puzzleDiameter} to be set.
Source:

attachAbsolutePositionValidator()

Sets a validator that will report when puzzle pieces are in their expected absolute positions, overriding any previously configured validator
Source:

attachConnectionRequirement(requirement)

Attaches a connection requirement function that will be used to check whether two close and matching pieces can be actually connected. By default no connection requirement is imposed which means that any close and matching pieces will be connected.
Parameters:
Name Type Description
requirement ConnectionRequirement
Source:

attachRelativePositionValidator()

Sets a validator that will report when puzzle pieces are in their expected relative positions, overriding any previously configured validator
Source:

attachRelativeRefsValidator(expected)

Sets a validator that will report when puzzle are at the expected given relative refs
Parameters:
Name Type Description
expected
Source:

attachSolvedValidator()

Sets a validator that will report when puzzle has been solved, overriding any previously configured validator
Source:

attachValidator(validator)

Sets a validator for the canvas' puzzle. Only one validator can be attached, so subsequent calls of this method will override the previously attached validator
Parameters:
Name Type Description
validator Validator
Source:

autogenerate(options)

Automatically creates and renders pieces given some configuration paramters
Parameters:
Name Type Description
options object
Properties
Name Type Attributes Description
horizontalPiecesCount number <optional>
verticalPiecesCount number <optional>
insertsGenerator InsertsGenerator <optional>
metadata Array.<CanvasMetadata> <optional>
 optional list of metadata that will be attached to each generated piece
Source:

autogenerateWithManufacturer(manufacturer)

Parameters:
Name Type Description
manufacturer Manufacturer
Source:

clear()

Clears the canvas, clearing the rendering backend and discarding all the created templates, figures, and pieces
Source:

clearConnectionRequirements()

Removes the connection requirement, if any.
Source:

defineTemplate(name, template)

Creates a name piece template, that can be later instantiated using Canvas#sketchPieceUsingTemplate
Parameters:
Name Type Description
name string
template Template
Source:

draw()

Draws this canvas for the first time
Source:

getFigure(piece) → {Figure}

Answers the visual representation for the given piece. This method uses piece's id.
Parameters:
Name Type Description
piece Piece
Source:
Returns:
Type
Figure

getFigureById(id) → {Figure}

Answers the visual representation for the given piece id.
Parameters:
Name Type Description
id string
Source:
Returns:
Type
Figure

imageMetadataFor(piece) → {ImageMetadata}

Parameters:
Name Type Description
piece Piece
Source:
Returns:
Type
ImageMetadata

onConnect(f)

Registers a listener for connect events
Parameters:
Name Type Description
f CanvasConnectionListener
Source:

onDisconnect(f)

Registers a listener for disconnect events
Parameters:
Name Type Description
f CanvasConnectionListener
Source:

onTranslate(f)

Parameters:
Name Type Description
f CanvasTranslationListener
Source:

onValid(f)

Parameters:
Name Type Description
f ValidationListener
Source:

redraw()

Re-draws this canvas. This method is useful when the canvas Figures have being modified and you need changes to become visible
Source:

refill()

Refreshes image metadata. Use this method in order adjuster updates and image changes after initial draw to make effect.
Source:

reframeWithinDimensions()

Translates all the pieces - preserving their relative positions - so that they all can be visible, if possible. If they are already fully visible, this method does nothing. In order to prevent unexpected translations, this method will fail if canvas is not `fixed`.
Source:

registerKeyboardGestures(gestures)

Registers keyboard gestures. `gestures` must be an object with one or more entries with the following format: ``` { keyStrokeNumber: (puzzle) => ...change drag mode... } ``` For example, if you want to configure your canvas to force pieces to be moved together using the `alt` key, you can do the following: ``` canvas.registerKeyboardGestures({ 18: (puzzle) => puzzle.forceConnectionWhileDragging() }) ``` If no gestures are given, then the following gestures are configured: - `16` (`shift`): drags blocks of pieces as a whole, regardless of the movement direction - `17` (`ctrl`): drags pieces individually, regardless of the movement direction
Parameters:
Name Type Description
gestures object
Source:

renderPiece(piece)

Renders a previously created piece object
Parameters:
Name Type Description
piece Piece
Source:

renderPieces(pieces)

Renders many previously created piece objects
Parameters:
Name Type Description
pieces Array.<Piece>
Source:

renderPuzzle(puzzle)

Renders a previously created puzzle object. This method overrides this canvas' Canvas#pieceDiameter and Canvas#proximity
Parameters:
Name Type Description
puzzle Puzzle
Source:

resize(width, height)

Sets the new width and height of the canvas
Parameters:
Name Type Description
width number
height number
Source:

scale(factor)

Scales the canvas contents to the given factor
Parameters:
Name Type Description
factor Vector | number
Source:

shuffle(farness)

Parameters:
Name Type Default Description
farness number 1 from 0 to 1, how far pieces will be placed from x = pieceDiameter.x, y = pieceDiameter.y
Source:

shuffleColumns(farness)

**Warning**: this method requires {@code maxPiecesCount} to be set.
Parameters:
Name Type Default Description
farness number 1
Source:

shuffleGrid(farness)

**Warning**: this method requires {@code maxPiecesCount} to be set.
Parameters:
Name Type Default Description
farness number 1
Source:

shuffleLine(farness)

**Warning**: this method requires {@code maxPiecesCount} to be set. **Warning**: this method requires puzzle to have an even number of columns
Parameters:
Name Type Default Description
farness number 1
Source:

shuffleWith(farness, shuffler)

Parameters:
Name Type Description
farness number
shuffler Shuffler
Source:

sketchPiece(options)

Creates and renders a piece using a template, that is ready to be rendered by calling Canvas#draw
Parameters:
Name Type Description
options Template
Source:

sketchPieceUsingTemplate(id, templateName)

Creates a new Piece with given id using a named template defined with Canvas#defineTemplate
Parameters:
Name Type Description
id string
templateName string
Source: