Compartir a través de

Utilidades de SVG

SVGUtils es un conjunto de funciones y clases para simplificar las manipulaciones SVG de objetos visuales de Power BI.

Instalación

Para instalar el paquete, debe ejecutar el comando siguiente en el directorio con el objeto visual actual:

npm install powerbi-visuals-utils-svgutils --save

CssConstants

El módulo CssConstants proporciona la función y la interfaz especiales para trabajar con los selectores de clase.

El módulo powerbi.extensibility.utils.svg.CssConstants proporciona la siguiente función e interfaz:

ClassAndSelector

Esta interfaz describe propiedades comunes del selector de clases.

interface ClassAndSelector {
  class: string;
  selector: string;
}

createClassAndSelector

Esta función crea una instancia de ClassAndSelector con el nombre de la clase.

function createClassAndSelector(className: string): ClassAndSelector;

Ejemplo:

import { CssConstants } from "powerbi-visuals-utils-svgutils";
import createClassAndSelector = CssConstants.createClassAndSelector;
import ClassAndSelector = CssConstants.ClassAndSelector;

let divSelector: ClassAndSelector = createClassAndSelector("sample-block");

divSelector.selector === ".sample-block"; // returns: true
divSelector.class === "sample-block"; // returns: true

manipulation

El método manipulation proporciona algunas funciones especiales para generar cadenas que puede usar con la propiedad de transformación de SVG.

El módulo proporciona las siguientes funciones:

translate

Esta función crea una cadena translate para su uso con la propiedad de transformación de SVG.

function translate(x: number, y: number): string;

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translate(100, 100);

// returns: translate(100,100)

translateXWithPixels

Esta función crea una cadena translateX para su uso con la propiedad de transformación de SVG.

function translateXWithPixels(x: number): string;

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateXWithPixels(100);

// returns: translateX(100px)

translateWithPixels

Esta función crea una cadena translate para su uso con la propiedad de transformación de SVG.

function translateWithPixels(x: number, y: number): string;

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateWithPixels(100, 100);

// returns: translate(100px,100px)

translateAndRotate

Esta función crea una cadena translate-rotate para su uso con la propiedad de transformación de SVG.

function translateAndRotate(
  x: number,
  y: number,
  px: number,
  py: number,
  angle: number
): string;

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.translateAndRotate(100, 100, 50, 50, 35);

// returns: translate(100,100) rotate(35,50,50)

scale

Esta función crea una cadena scale para su uso en una propiedad de transformación de CSS.

function scale(scale: number): string;

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.scale(50);

// returns: scale(50)

transformOrigin

Esta función crea una cadena transform-origin para su uso en una propiedad de origen de transformación de CSS.

function transformOrigin(xOffset: string, yOffset: string): string;

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.transformOrigin(5, 5);

// returns: 5 5

flushAllD3Transitions

Esta función obliga a que se completen todas las transiciones de D3.

function flushAllD3Transitions(): void;

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.flushAllD3Transitions();

// forces every transition of D3 to complete

parseTranslateTransform

Esta función analiza la cadena de transformación con el valor "translate (x,y)".

function parseTranslateTransform(input: string): { x: string; y: string };

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.parseTranslateTransform("translate(100px,100px)");

// returns: { "x":"100px", "y":"100px" }

createArrow

Esta función crea una flecha.

function createArrow(
  width: number,
  height: number,
  rotate: number
): { path: string; transform: string };

Ejemplo:

import { manipulation } from "powerbi-visuals-utils-svgutils";
// ...

manipulation.createArrow(10, 20, 5);

/* returns: {
    "path": "M0 0L0 20L10 10 Z",
    "transform": "rotate(5 5 10)"
}*/

Rect

El módulo Rect proporciona algunas funciones especiales para manipular rectángulos.

El módulo proporciona las siguientes funciones:

getOffset

Esta función devuelve un desplazamiento del rectángulo.

function getOffset(rect: IRect): IPoint;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getOffset({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    x: 25,
    y: 25
}*/

getSize

Esta función devuelve el tamaño del rectángulo.

function getSize(rect: IRect): ISize;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getSize({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    width: 100,
    height: 100
}*/

setSize

Esta función modifica el tamaño del rectángulo.

function setSize(rect: IRect, value: ISize): void;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

let rectangle = { left: 25, top: 25, width: 100, height: 100 };

Rect.setSize(rectangle, { width: 250, height: 250 });

// rectangle === { left: 25, top: 25, width: 250, height: 250 }

Esta función devuelve una posición derecha del rectángulo.

function right(rect: IRect): number;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.right({ left: 25, top: 25, width: 100, height: 100 });

// returns: 125

abajo

Esta función devuelve una posición inferior del rectángulo.

function bottom(rect: IRect): number;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottom({ left: 25, top: 25, width: 100, height: 100 });

// returns: 125

topLeft

Esta función devuelve una posición superior izquierda del rectángulo.

function topLeft(rect: IRect): IPoint;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.topLeft({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 25, y: 25 }

topRight

Esta función devuelve una posición superior derecha del rectángulo.

function topRight(rect: IRect): IPoint;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.topRight({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 125, y: 25 }

bottomLeft

Esta función devuelve una posición inferior izquierda del rectángulo.

function bottomLeft(rect: IRect): IPoint;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottomLeft({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 25, y: 125 }

bottomRight

Esta función devuelve una posición inferior derecha del rectángulo.

function bottomRight(rect: IRect): IPoint;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.bottomRight({ left: 25, top: 25, width: 100, height: 100 });

// returns: { x: 125, y: 125 }

clone

Esta función crea una copia del rectángulo.

function clone(rect: IRect): IRect;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.clone({ left: 25, top: 25, width: 100, height: 100 });

/* returns: {
    left: 25, top: 25, width: 100, height: 100}
*/

toString

Esta función convierte el rectángulo en una cadena.

function toString(rect: IRect): string;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.toString({ left: 25, top: 25, width: 100, height: 100 });

// returns: {left:25, top:25, width:100, height:100}

offset

Esta función aplica un desplazamiento al rectángulo.

function offset(rect: IRect, offsetX: number, offsetY: number): IRect;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.offset({ left: 25, top: 25, width: 100, height: 100 }, 50, 50);

/* returns: {
    left: 75,
    top: 75,
    width: 100,
    height: 100
}*/

add

Esta función agrega el primer rectángulo al segundo.

function add(rect: IRect, rect2: IRect): IRect;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.add(
  { left: 25, top: 25, width: 100, height: 100 },
  { left: 50, top: 50, width: 75, height: 75 }
);

/* returns: {
    left: 75,
    top: 75,
    height: 175,
    width: 175
}*/

getClosestPoint

Esta función devuelve el punto más cercano del rectángulo al punto especificado.

function getClosestPoint(rect: IRect, x: number, y: number): IPoint;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getClosestPoint({ left: 0, top: 0, width: 100, height: 100 }, 50, 50);

/* returns: {
    x: 50,
    y: 50
}*/

equal

Esta función compara los rectángulos y devuelve true si son iguales.

function equal(rect1: IRect, rect2: IRect): boolean;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.equal(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 50, top: 50, width: 100, height: 100 }
);

// returns: false

equalWithPrecision

Esta función compara los rectángulos considerando la precisión de los valores.

function equalWithPrecision(rect1: IRect, rect2: IRect): boolean;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.equalWithPrecision(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 50, top: 50, width: 100, height: 100 }
);

// returns: false

isEmpty

Esta función comprueba si el rectángulo está vacío.

function isEmpty(rect: IRect): boolean;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.isEmpty({ left: 0, top: 0, width: 0, height: 0 });

// returns: true

containsPoint

Esta función comprueba si el rectángulo contiene un punto específico.

function containsPoint(rect: IRect, point: IPoint): boolean;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.containsPoint(
  { left: 0, top: 0, width: 100, height: 100 },
  { x: 50, y: 50 }
);

// returns: true

isIntersecting

Esta función comprueba si los rectángulos se cruzan.

function isIntersecting(rect1: IRect, rect2: IRect): boolean;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.isIntersecting(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 50 }
);

// returns: true

intersect

Esta función devuelve una intersección de rectángulos.

function intersect(rect1: IRect, rect2: IRect): IRect;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.intersect(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 50 }
);

/* returns: {
    left: 0,
    top: 0,
    width: 50,
    height: 50
}*/

combine

Esta función combina rectángulos.

function combine(rect1: IRect, rect2: IRect): IRect;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.combine(
  { left: 0, top: 0, width: 100, height: 100 },
  { left: 0, top: 0, width: 50, height: 120 }
);

/* returns: {
    left: 0,
    top: 0,
    width: 100,
    height: 120
}*/

getCentroid

Esta función devuelve una punto central del rectángulo.

function getCentroid(rect: IRect): IPoint;

Ejemplo:

import { shapes } from "powerbi-visuals-utils-svgutils";
import Rect = shapes.Rect;
// ...

Rect.getCentroid({ left: 0, top: 0, width: 100, height: 100 });

/* returns: {
    x: 50,
    y: 50
}*/