Fancyapps

Toolbar ​

This plugin is used to extend Panzoom with a toolbar containing transform buttons. You can customize which buttons to show, their icons, as well as add new ones.

Examples ​

Basic example ​

All controls ​

This example demonstrates all available toolbar buttons

Usage ​

Include corresponding JS and CSS files:

js
import { Toolbar } from "@fancyapps/ui/dist/panzoom/panzoom.toolbar.esm.js";
import "@fancyapps/ui/dist/panzoom/panzoom.toolbar.css";

Pass plugin to the constructor. Use Toolbar.display option to specify which buttons to display and in what order:

js
const container = document.getElementById("myPanzoom");
const options = {
  Toolbar: {
    display: ["zoomIn", "zoomOut"],
  },
};

new Panzoom(container, options, { Toolbar });

JSFiddle Example

Available buttons ​

List of all buttons available by default:

"zoomIn",
"zoomOut",
"toggle1to1",
"toggleZoom",
"panLeft",
"panRight",
"panUp",
"panDown",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
"fitX",
"fitY",
"reset",
"toggleFS"

The meaning of each button should be clear from its name, for example, flipX would flip content horizontally.

Options ​

display ​

What buttons to display on the toolbar

Type

Array<keyof typeof ToolbarButtons>

Default

js
[
  "zoomIn",
  "zoomOut",
  "toggle1to1",
  "rotateCCW",
  "rotateCW",
  "flipX",
  "flipY",
  "reset",
  "toggleFS",
];

items ​

Object containing all buttons. Use this to add your own buttons

Type

Record<string, ToolbarItemType>

Default

PanzoomButtons

svgAttr ​

Common attributes that will be applied to any SVG icon inside the buttons

Type

Record<string, string>

Default

js
{
    tabindex: "-1",
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
}