# How to use the transformation-matrix.fromObject function in transformation-matrix

## To help you get started, we’ve selected a few transformation-matrix examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

chrvadala / react-svg-pan-zoom / es / features / pan.js View on Github
export function pan(value, SVGDeltaX, SVGDeltaY) {
var panLimit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;

var matrix = transform(fromObject(value), //2
translate(SVGDeltaX, SVGDeltaY) //1
);

// apply pan limits
if (panLimit) {
var _applyToPoints = applyToPoints(matrix, [{ x: panLimit, y: panLimit }, { x: value.SVGWidth - panLimit, y: value.SVGHeight - panLimit }]),
_applyToPoints2 = _slicedToArray(_applyToPoints, 2),
_applyToPoints2\$ = _applyToPoints2[0],
x1 = _applyToPoints2\$.x,
y1 = _applyToPoints2\$.y,
_applyToPoints2\$2 = _applyToPoints2[1],
x2 = _applyToPoints2\$2.x,
y2 = _applyToPoints2\$2.y;

//x limit
chrvadala / react-svg-pan-zoom / src / features / pan.js View on Github
export function pan(value, SVGDeltaX, SVGDeltaY, panLimit = undefined) {

let matrix = transform(
fromObject(value),              //2
translate(SVGDeltaX, SVGDeltaY) //1
);

// apply pan limits
if (panLimit) {
let [{x: x1, y: y1}, {x: x2, y: y2}] = applyToPoints(matrix, [
{x: value.SVGMinX + panLimit, y: value.SVGMinY + panLimit},
{x: value.SVGMinX + value.SVGWidth - panLimit, y: value.SVGMinY + value.SVGHeight - panLimit}
]);

//x limit
let moveX = 0;
if (value.viewerWidth - x1 < 0)
moveX = value.viewerWidth - x1;
else if (x2 < 0) moveX = -x2;
chrvadala / react-svg-pan-zoom / src / features / interactions-touch.js View on Github
const pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
const svgPoint = getSVGPoint(value, (x1 + x2) / 2, (y1 + y2) / 2);
let distanceFactor = pinchPointDistance/previousPointDistance;

if (isZoomLevelGoingOutOfBounds(value, distanceFactor)) {
// Do not change translation and scale of value
return value;
}

if (event.cancelable) {
event.preventDefault();
}

let matrix = transform(
fromObject(value),
translate(svgPoint.x, svgPoint.y),
scale(distanceFactor, distanceFactor),
translate(-svgPoint.x, -svgPoint.y)
);

return set(value, set({
mode: MODE_ZOOMING,
...limitZoomLevel(value, matrix),
startX: null,
startY: null,
endX: null,
endY: null,
prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
pinchPointDistance
}));
}
chrvadala / react-svg-pan-zoom / test / test-utils.js View on Github
export function testBBox(value) {
const matrix = fromObject(value)

const {SVGMinX, SVGMinY, SVGWidth, SVGHeight} = value
const topLeft = applyToPoint(matrix, {x: 0, y: 0})
const bottomRight = applyToPoint(matrix, {x: SVGWidth - SVGMinX, y: SVGHeight - SVGMinY})

//x1, y1, x2, y2
return [topLeft.x, topLeft.y, bottomRight.x, bottomRight.y]
}
chrvadala / react-svg-pan-zoom / es / features / zoom.js View on Github
export function zoom(value, SVGPointX, SVGPointY, scaleFactor) {

var matrix = transform(fromObject(value), translate(SVGPointX, SVGPointY), scale(scaleFactor, scaleFactor), translate(-SVGPointX, -SVGPointY));

return set(value, _extends({
mode: MODE_IDLE
}, matrix, {
startX: null,
startY: null,
endX: null,
endY: null
}));
}
chrvadala / react-svg-pan-zoom / es / features / common.js View on Github
export function decompose(value) {
var matrix = fromObject(value);

return {
scaleFactor: matrix.a,
translationX: matrix.e,
translationY: matrix.f
};
}
chrvadala / react-svg-pan-zoom / es / features / common.js View on Github
export function getSVGPoint(value, viewerX, viewerY) {
var matrix = fromObject(value);

var inverseMatrix = inverse(matrix);
return applyToPoint(inverseMatrix, { x: viewerX, y: viewerY });
}
chrvadala / react-svg-pan-zoom / src / features / common.js View on Github
export function getSVGPoint(value, viewerX, viewerY) {
let matrix = fromObject(value);

let inverseMatrix = inverse(matrix);
return applyToPoint(inverseMatrix, {x: viewerX, y: viewerY});
}

## transformation-matrix

2d transformation matrix functions written in ES6 syntax. Tree shaking ready!

MIT