Fancyapps

Controls ​

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 ​

Sample image

All controls ​

This example demonstrates all available toolbar buttons

Sample image

Usage ​

Include corresponding JS and CSS files. Pass Controls to Panzoom constructor or use plugins option. Use Controls.display option to specify which buttons to display and in what order:

js
import { Panzoom } from "@fancyapps/ui/dist/panzoom/panzoom.js";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

import { Controls } from "@fancyapps/ui/dist/panzoom/panzoom.controls.js";
import "@fancyapps/ui/dist/panzoom/panzoom.controls.css";

const container = document.getElementById("myPanzoom");
const options = {
  Controls: {
    display: [
      "zoomIn",
      "zoomOut",
      "toggle1to1",
      "rotateCCW",
      "rotateCW",
      "flipX",
      "flipY",
      "reset",
    ],
  },
};

Panzoom(container, options, { Controls }).init();
ts
import { Panzoom, type PanzoomOptions } from "@fancyapps/ui/dist/panzoom/";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

import { Controls } from "@fancyapps/ui/dist/panzoom/panzoom.controls.js";
import "@fancyapps/ui/dist/panzoom/panzoom.controls.css";

const container = document.getElementById("myPanzoom");
const options: Partial<PanzoomOptions> = {
  Controls: {
    display: [
      "zoomIn",
      "zoomOut",
      "toggle1to1",
      "rotateCCW",
      "rotateCW",
      "flipX",
      "flipY",
      "reset",
    ],
  },
};

Panzoom(container, options, { Controls }).init();

Available buttons ​

List of all buttons available by default:

"zoomIn"
"zoomOut"
"toggle1to1"
"toggleFull"
"moveLeft"
"moveRight"
"moveUp"
"moveDown"
"rotateCCW"
"rotateCW"
"flipX"
"flipY"
"reset"

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

Default

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

items ​

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

Default

{}

svgAttr ​

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

Default

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