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

JS Bin Example

All controls ​

This example demonstrates all available toolbar buttons

Sample image

JS Bin Example

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"
"iterateZoom"
"moveLeft"
"moveRight"
"moveUp"
"moveDown"
"rotateCCW"
"rotateCW"
"flipX"
"flipY"
"reset"
"toggleFS"

The meaning of each button should be clear from its name, for example, flipX would flip content horizontally. Buttons like iterateZoom would perform the corresponding click action to change the zoom level.

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",
}