Skip to main content

Utils

2flex provides some of the utils functions that would be helpfull when building blocks.

fromPercentage​

Converting from percenatge to pixel. parentSize parameter must be related parent size.

fromPercentage(from, parentSize)

Parameters

  • from : number
  • parentSize : number

Returns

  • fromPercentage : number

fromVW​

Converting from viewport's width to pixel. parentWidth parameter must be related parent size.

fromVW(from, parentWidth)

Parameters

  • from : number
  • parentWidth : number

Returns

  • fromVW : number

fromVH​

Converting from viewport's height to pixel. parentHeight parameter must be related parent size.

fromVH(from, parentHeight)

Parameters

  • from : number
  • parentHeight : number

Returns

  • fromVH : number

fromRem​

Converting from rem for relative parentSize size to pixel. parentSize parameter must be related parent size. Most of the time this parentSize should be size of root block or canvas.

fromRem(from, parentSize)

Parameters

  • from : number
  • parentSize : number

Returns

  • fromRem : number

fromEm​

Converting from em for relative parentSize size to pixel. parentSize parameter must be related parent size.

fromEm(from, parentSize)

Parameters

  • from : number
  • parentSize : number

Returns

  • fromEm : number

fromCm​

Converting from centimeter size to pixel.

fromCm(from)

Parameters

  • from : number

Returns

  • fromCm : number

fromMm​

Converting from millimeter size to pixel.

fromMm(from)

Parameters

  • from : number

Returns

  • fromMm : number

fromQ​

Converting from quarter-millimeters size to pixel.

fromQ(from)

Parameters

  • from : number

Returns

  • fromQ : number

fromIn​

Converting from inches size to pixel.

fromIn(from)

Parameters

  • from : number

Returns

  • fromIn : number

fromPc​

Converting from picas size to pixel.

fromPc(from)

Parameters

  • from : number

Returns

  • fromPc : number

fromPt​

Converting from points size to pixel.

fromPt(from)

Parameters

  • from : number

Returns

  • fromPt : number

xIntersect​

Checking if two boxes intersect each other on x axis.

xIntersect(a, b)

Parameters

  • a : { left: number; right: number }
  • b : { left: number; right: number }

Returns

  • xIntersect : number

yIntersect​

Checking if two boxes intersect each other on y axis.

yIntersect(a, b)

Parameters

  • a : { top: number; bottom: number }
  • b : { top: number; bottom: number }

Returns

  • yIntersect : number

checkInBound​

Check if the poinst (pointX, pointY) inside the the defined points (px1, py1, px2, py2, px3, py3, px4, py4)

checkInBound(pointX, pointY, px1, py1, px2, py2, px3, py3, px4, py4)

Parameters

  • pointX : number
  • pointY : number
  • px1 : number
  • py1 : number
  • px2 : number
  • py2 : number
  • px3 : number
  • py3 : number
  • px4 : number
  • py4 : number

Returns

  • checkInBound : boolean

radianToDegree​

Converting radian to degree.

radianToDegree(rad)

Parameters

  • rad : number

Returns

  • radianToDegree : number

degreeToRadian​

Converting degree to degree.

degreeToRadian(rad)

Parameters

  • rad : number

Returns

  • degreeToRadian : number

rotateCordinates​

Rotate x and y cordinates in given centers (centerX, centerY) relative to radian parameter.

rotateCordinates(x, y, centerX, centerY, radian)

Parameters

  • x : number
  • y : number
  • centerX : number
  • centerY : number
  • radian : number

Returns

  • rotateCordinates : { x: number; y: number }

bezierEasing​

Creates cubic bezire callback functions using for animations.

bezierEasing(p1x, p1y, p2x, p2y)

Parameters

  • p1x : number
  • p1y : number
  • p2x : number
  • p2y : number

Returns

  • bezierEasing : (t: number, duration: number) => number

cubicBezier​

Gives a point for given t property, for given polynomial cubic bezier function.

cubicBezier(p0, p1, p2, p3, t)

Parameters

  • p0 : number
  • p1 : number
  • p2 : number
  • p3 : number
  • t : number

Returns

  • cubicBezier : number

lerp​

Linear Interpolation function which gives a point for given t property relative to start to end properties.

lerp(start, end, t)

Parameters

  • start : number
  • end : number
  • t : number

Returns

  • lerp : number

linear​

Creates linear callback functions using for animations.

linear(...args)

Parameters

  • args : number[]

Returns

  • linear : (t: number) => number

steps​

Creates steps callback functions using for animations.

steps(step, position)

Parameters

  • step : number
  • position : JumpPosition

Returns

  • steps : (t: number) => number

clamp​

Keeps num in boundries of min and max properties.

clamp(num, min, max)

Parameters

  • num : number
  • min : number
  • max : number

Returns

  • clamp : number

hexToRgba​

Converting hexadecimal to Rgba (Red, Green, Blue, Alpha) value.

hexToRgba(hex)

Parameters

  • hex : string

Returns

  • hexToRgba : string

hslToRgba​

Converting hsl (Hue, Saturation, Luminance) to Rgba (Red, Green, Blue, Alpha) value.

hslToRgba(hsl)

Parameters

  • hsl : string

Returns

  • hslToRgba : string

colorToRgba​

Converting defined colors (black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua) to Rgba (Red, Green, Blue, Alpha) value.

colorToRgba(color)

Parameters

  • color : string

Returns

  • colorToRgba : string

inRange​

Checks if given value do not exceeds great or less propeties.

inRange(value, great, less)

Parameters

  • value : number
  • great : number
  • less : number

Returns

  • inRange : boolean