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.

github chrvadala / react-svg-pan-zoom / es / features / pan.js View on Github external
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
github chrvadala / react-svg-pan-zoom / src / features / pan.js View on Github external
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;
github chrvadala / react-svg-pan-zoom / src / features / interactions-touch.js View on Github external
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
  }));
}
github chrvadala / react-svg-pan-zoom / test / test-utils.js View on Github external
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]
}
github chrvadala / react-svg-pan-zoom / es / features / zoom.js View on Github external
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
  }));
}
github chrvadala / react-svg-pan-zoom / es / features / common.js View on Github external
export function decompose(value) {
  var matrix = fromObject(value);

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

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

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