import Bend from '@carwin/flag-generator/src/divisions/Bend.js'

public class | source

Bend

Extends:

Division → Bend

Bends pattern.

Constructor Summary

Public Constructor
public	constructor(count: number, direction: string, party: boolean, color: string, width: number, border: boolean, borderWidth: number, borderColor: string) Creates a Bend.

Member Summary

Public Members
public	border: *
public	borderColor: *
public	borderWidth: *
public	direction: *
public	party: *
public	width: *

Method Summary

Public Methods
public	draw(ctx: object) Draws the Chevron division on a canvas.
public	drawInstructions(direction: string): Function Returns the proper draw function instructions for a given direction.
public	drawInstructionsDexter(party: boolean): Array Generates the draw instructions for the palewise and palewiseReversed directions.
public	drawInstructionsSinister(party: boolean): Array Generates the draw instructions for the sinister.
public	generateDirection(seed: number): string Generate a direction value for the Bend.
public	shiftStep(positionShift: number, direction: string, oddDirection: string): Function A semi-curried function that applies the passed arguments to drawSteps.

Inherited Summary

From class Division
public	color: *
public	count: *
public	limit: *
public	seed: *
public	seedMultiplier: *

Public Constructors

public constructor(count: number, direction: string, party: boolean, color: string, width: number, border: boolean, borderWidth: number, borderColor: string) source

Creates a Bend.

Override:

Division#constructor

Params:

Name	Type	Attribute	Description
count	number		The number of divisions to draw.
direction	string		The orientation of the Pall. One of: dexter, sinister.
party	boolean		Whether this division should take up an entire diagonal half of the flag.
color	string		A hexadecimal color string.
width	number		A width value for drawing the division.
border	boolean		Whether or not to draw a border around the Pall.
borderWidth	number		The width of the border.
borderColor	string		A hexadecimal color string.

Example:

// Creates two white Bends across the flag with black borders
const bend = new Bend(2, 'dexter', false, '#ffffff', undefined, true, 20, '#000000');
// Creates a single Bend division as a party of the flag.
const bendFilled = new Bend(1, 'sinister', true, '#ffffff');

TODO:

Enhance the generation of border widths, possibly extrapolate whatever we come up with into parent Division class.

Public Members

public border: * source

public borderColor: * source

public borderWidth: * source

public direction: * source

public party: * source

public width: * source

Public Methods

public draw(ctx: object) source

Draws the Chevron division on a canvas.

Params:

Name	Type	Attribute	Description
ctx	object		An object containing a canvas context.

Example:

// Draws the Bends division on the canvas.
const bend = new Bend();
bend.draw(ctx);

public drawInstructions(direction: string): Function source

Returns the proper draw function instructions for a given direction.

Params:

Name	Type	Attribute	Description
direction	string		One of: dexter, sinister.

Return:

Function

The draw instruction function corresponding to the direction.

Example:

// Returns drawInstructionsDexter();
const bend = new Bends();
chevron.drawInstructions('dexter');

public drawInstructionsDexter(party: boolean): Array source

Generates the draw instructions for the palewise and palewiseReversed directions.

Params:

Name	Type	Attribute	Description
party	boolean		Whether or not the division should be filled.

Return:

Array

An array of objects containing canvas drawing instructions.

Example:

// Returns an instruction set for the palewise direction based on the flag dimensions.
// [
//     {moveTo: [x, y]},
//     {lineTo: [x, y]},
//     {lineTo: [x, y]},
// ]
const bends = new Bends();
const instructions = bends.drawInstructionsDexter();

public drawInstructionsSinister(party: boolean): Array source

Generates the draw instructions for the sinister.

Params:

Name	Type	Attribute	Description
party	boolean		Whether or not the division should be filled.

Return:

Array

An array of objects containing canvas drawing instructions.

Example:

// Returns an instruction set for the sinister direction based on the flag dimensions.
// [
//     {moveTo: [x, y]},
//     {lineTo: [x, y]},
//     {lineTo: [x, y]},
// ]
const bends = new Bends();
const instructions = bends.drawInstructionsSinister();

public generateDirection(seed: number): string source

Generate a direction value for the Bend.

Params:

Name	Type	Attribute	Description
seed	number		The seed number used for generated values.

Return:

string

One of: 'dexter', 'sinister'.

Example:

// Returns 'dexter'
const newBend = new Bend();
newBend.generateDirection(.1337)

public shiftStep(positionShift: number, direction: string, oddDirection: string): Function source

A semi-curried function that applies the passed arguments to drawSteps. Used as a callback for array.map() to pass arguments into the map function's callback function.

Params:

Name	Type	Attribute	Description
positionShift	number		The value by which we will shift the inner function's p parameter.
direction	string		The string value of the current operating direction.
oddDirection	string		The odd-man-out direction that needs special processing.

Return:

Function

A callback function that operates using the values of shiftStep().

Example:

// Applies a shift width of 100 to a drawStep's parameters.
for (let i = 0, len = drawSteps.length; i < len; i++) {
const step = Object.keys(drawSteps[i]);
const stepParams = Object.values(drawSteps[i])[0];
ctx[step](...stepParams.map(shiftStep(positionShift, 'sinister', 'dexter')));
}

TODO:

The shift position is based entirely on 3:5 flags, make it more... Betterer...
Come up with a better description, and maybe a better name for the oddDirection parameter.