Utilidades SVG

SVGUtils é um conjunto de funções e classes para simplificar manipulações SVG para visuais do Power BI.

Instalação

Para instalar o pacote, você deve executar o seguinte comando no diretório com seu visual atual:

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

CssConstants

O CssConstants módulo fornece a função especial e interface para trabalhar com seletores de classe.

O powerbi.extensibility.utils.svg.CssConstants módulo fornece a seguinte função e interface:

ClassAndSelector

Esta interface descreve as propriedades comuns do seletor de classe.

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

createClassAndSelector

Esta função cria uma instância de ClassAndSelector com o nome da classe.

function createClassAndSelector(className: string): ClassAndSelector;

Exemplo:

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

manipulação

O manipulation método fornece algumas funções especiais para gerar cadeias de caracteres que você pode usar com a propriedade de transformação SVG.

O módulo fornece as seguintes funções:

Traduzir

Esta função cria uma cadeia de caracteres de tradução para uso com a propriedade de transformação SVG.

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

Exemplo:

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

manipulation.translate(100, 100);

// returns: translate(100,100)

traduzirXWithPixels

Esta função cria uma cadeia de caracteres translateX para uso com a propriedade de transformação SVG.

function translateXWithPixels(x: number): string;

Exemplo:

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

manipulation.translateXWithPixels(100);

// returns: translateX(100px)

traduzirWithPixels

Esta função cria uma cadeia de caracteres de tradução para uso com a propriedade de transformação SVG.

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

Exemplo:

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

manipulation.translateWithPixels(100, 100);

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

traduzirAndRotate

Essa função cria uma cadeia de caracteres translate-rotate para uso com a propriedade transform SVG.

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

Exemplo:

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

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

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

scale

Esta função cria uma cadeia de caracteres de escala para uso em uma propriedade de transformação CSS.

function scale(scale: number): string;

Exemplo:

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

manipulation.scale(50);

// returns: scale(50)

transformOrigin

Esta função cria uma cadeia de caracteres transform-origin para uso em uma propriedade transform-origin CSS.

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

Exemplo:

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

manipulation.transformOrigin(5, 5);

// returns: 5 5

flushAllD3Transições

Esta função força cada transição de D3 a ser concluída.

function flushAllD3Transitions(): void;

Exemplo:

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

manipulation.flushAllD3Transitions();

// forces every transition of D3 to complete

parseTranslateTransform

Esta função analisa a cadeia de caracteres de transformação com o valor "translate(x,y)".

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

Exemplo:

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

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

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

criarSeta

Esta função cria uma seta.

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

Exemplo:

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

O Rect módulo fornece algumas funções especiais para manipular retângulos.

O módulo fornece as seguintes funções:

getOffset

Esta função retorna um deslocamento do retângulo.

function getOffset(rect: IRect): IPoint;

Exemplo:

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 função devolve o tamanho do retângulo.

function getSize(rect: IRect): ISize;

Exemplo:

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
}*/

setTamanho

Esta função modifica o tamanho do retângulo.

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

Exemplo:

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 }

Certo

Esta função retorna uma posição correta do retângulo.

function right(rect: IRect): number;

Exemplo:

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

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

// returns: 125

fundo

Esta função devolve uma posição inferior do retângulo.

function bottom(rect: IRect): number;

Exemplo:

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

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

// returns: 125

topEsquerda

Esta função retorna uma posição superior esquerda do retângulo.

function topLeft(rect: IRect): IPoint;

Exemplo:

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 }

topDireita

Esta função retorna uma posição superior direita do retângulo.

function topRight(rect: IRect): IPoint;

Exemplo:

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 }

abaixoEsquerda

Esta função devolve uma posição inferior esquerda do retângulo.

function bottomLeft(rect: IRect): IPoint;

Exemplo:

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 }

abaixoDireita

Esta função retorna uma posição inferior direita do retângulo.

function bottomRight(rect: IRect): IPoint;

Exemplo:

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 função cria uma cópia do retângulo.

function clone(rect: IRect): IRect;

Exemplo:

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 função converte o retângulo em uma cadeia de caracteres.

function toString(rect: IRect): string;

Exemplo:

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 função aplica um deslocamento ao retângulo.

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

Exemplo:

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
}*/

adicionar

Esta função adiciona o primeiro retângulo ao segundo retângulo.

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

Exemplo:

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 função devolve o ponto mais próximo do retângulo a um ponto específico.

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

Exemplo:

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
}*/

igual a

Esta função compara retângulos e retorna true se eles forem os mesmos.

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

Exemplo:

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 função compara retângulos considerando a precisão dos valores.

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

Exemplo:

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 função verifica se um retângulo está vazio.

function isEmpty(rect: IRect): boolean;

Exemplo:

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

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

// returns: true

contémPonto

Esta função verifica se um retângulo contém um ponto específico.

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

Exemplo:

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 função verifica se os retângulos estão se cruzando.

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

Exemplo:

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

interseção

Esta função retorna uma interseção de retângulos.

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

Exemplo:

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
}*/

combinar

Esta função combina retângulos.

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

Exemplo:

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 função retorna um ponto central do retângulo.

function getCentroid(rect: IRect): IPoint;

Exemplo:

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
}*/