@mescius/dsimageviewer
Version:
Document Solutions Image Viewer
380 lines (379 loc) • 14 kB
TypeScript
import { GifOptions } from "./ImagePanel/Gif/types";
import { KeyboardShortcutDefinition, LogLevel, OpenParameters, SaveButtonOptions } from "./Models/Types";
import { UndoStorageOptions } from "./Undo/types";
/**
* Image Viewer options.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", { friendlyFileName: "sample.png" });
* ```
**/
export declare class ViewerOptions {
/**
* ViewerOptions constructor
* @param options viewer options object.
* @ignore exclude from docs
* @example
* ```javascript
* // Create options object:
* var options = { snapAlignment: false, supportApi: 'api/pdf-viewer'};
* // Pass options object to the DsImageViewer constructor:
* var viewer = new DsImageViewer("#root", options);
* ```
*/
constructor(options?: Partial<ViewerOptions>);
/**
* Viewer client area background color.
* @default rgb(128,128,128)
**/
viewerBackground?: string;
/**
* Use this option to change the default SVG icons to custom ones.
* Available icon keys: 'about', 'download', 'flip-horizontal', 'flip-vertical', 'magnify-minus-outline', 'magnify-plus-outline', 'magnify', 'open', 'print', 'rotate', 'edit-undo', 'edit-redo'.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", {
* customIcons: {
* 'open': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path></svg>'
* }
* });
* ```
**/
customIcons?: {
[iconKey: string]: Element | string;
};
/**
* Used when file name not available.
* @example
* ```javascript
* viewer.options.friendlyFileName = "myFileName.png";
* viewer.applyOptions();
* ```
* */
friendlyFileName?: string;
/**
* Specifies the Image file name, URL, or binary data to be loaded in the Viewer.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", { file: 'sample.png' } );
* ```
*/
file?: string | any;
/**
* Array of the available font names.
* @default [
* { value: 'Helv', name: 'Helvetica' }, { value: 'HelveticaRegular', name: 'Helvetica-Oblique' }, { value: 'HelveticaBold', name: 'Helvetica-Bold' }, { value: 'HelveticaBoldItalic', name: 'Helvetica-BoldOblique' },
* { value: 'TimesRegular', name: 'Times-Roman' }, { value: 'TimesItalic', name: 'Times-Italic' }, { value: 'TimesBold', name: 'Times-Bold' }, { value: 'TimesBoldItalic', name: 'Times-BoldItalic' },
* { value: 'CourierRegular', name: 'Courier' }, { value: 'CourierItalic', name: 'Courier-Oblique' }, { value: 'CourierBold', name: 'Courier-Bold' }, { value: 'CourierBoldItalic', name: 'Courier-BoldOblique' },
* { value: 'Symbol', name: 'Symbol' }
* ]
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", {
* fontNames: [{value: 'Arial', name: 'Arial'}, {value: 'Verdana', name: 'Verdana'}]
* });
* ```
**/
fontNames?: {
value: string;
name: string;
}[];
/**
* GIF image format options.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", {
* gifOptions: {
* autoPlay: true, // start GIF animation automatically
* cumulative: false, // disable cumulative frame rendering (clear previous frame appearance)
* playOnClick: true, // play on click
* playOnHover: false, // do not play on hover
* speed: 2 // double the speed
* }
* });
* ```
**/
gifOptions?: GifOptions;
/**
* The image quality to use for image formats that utilize lossy compression, such as JPEG and WEBP.
* The value should be a number between 0 and 1, where 0 represents the lowest quality and 1 represents the highest quality.
* If this option is not specified, the default value of 0.92 is used.
* Please note that this option exclusively affects image editing capabilities only.
*
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", {
* imageQuality: 0.5 // Set image quality to medium.
* });
* ```
**/
imageQuality?: number;
/**
* Specifies whether to hide the toolbar.
* @default false
* @example
* ```javascript
* const viewer = new DsImageViewer("#root", { hideToolbar: true } );
* ```
**/
hideToolbar?: boolean;
/**
* User interface language.
* Note, in order to use the language option,
* you must specify the language option value during
* the viewer initialization phase.
* @example
* ```javascript
* // Set UI language to Japanese:
* var viewer = new DsImageViewer(selector, { language: 'ja' });
* ```
* @example
* ```javascript
* // Define custom translations:
* function loadImageViewer(selector) {
* var myTranslations = {
* "toolbar": {
* "open": "Öffnen",
* "save": "Speichern",
* "print": "Drucken",
* "save-as": "Speichern unter"
* }
* };
* // Initialize translations:
* DsImageViewer.i18n.init({
* resources: { myLang: { translation: myTranslations } }
* }).then(function(t) {
* // Translations initialized and ready to go.
* // Now create Image viewer:
* var viewer = new DsImageViewer(selector, { language: 'myLang' });
*
* });
* }
* loadImageViewer('#root');
* ```
**/
language?: 'en' | string;
/**
* Use the maxImageSize option to limit the allowed image size used by the edit actions.
**/
maxImageSize?: {
width: number;
height: number;
};
/**
* The onInitialized handler will be called immediately after the viewer is instantiated.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", {
* onInitialized: (viewer)=> {
* // put viewer initialization code here.
* }
* });
* ```
**/
onInitialized?: (viewer: any) => void;
/**
* Options for customizing the behavior and appearance of the "Save" button.
*/
saveButton?: SaveButtonOptions;
/**
* Use theme option to change default viewer theme.
* Available built-in themes are:
* gc-blue, viewer, dark, dark-yellow, light, light-blue.
* Set this option to false if you want to disable theme loading - this can be helpful if you have already included theme css.
* @default Default theme is gc-blue.
* @example
* ```javascript
* // Require built-in light theme:
* var viewer = new DsImageViewer("#root", { theme: "light" });
* ```
* @example
* ```javascript
* // Require built-in dark theme:
* var viewer = new DsImageViewer("#root", { theme: "dark" });
* ```
* @example
* ```javascript
* // Load external light theme css using relative URL:
* var viewer = new DsImageViewer("#root", { theme: "themes/light.css" });
* ```
* @example
* ```javascript
* // Load external dark theme css using an absolute URL:
* var viewer = new DsImageViewer("#root", { theme: "http://localhost:8080/themes/dark.css" });
* ```
* @example
* ```javascript
* // <link href="~/Content/light-blue.css" rel="stylesheet" />
* // Do not load theme:
* var viewer = new DsImageViewer("#root", { theme: false } );
* ```
**/
theme?: string | false;
/**
* Use the requireTheme option to apply built-in CSS theme, the option will inject theme styles directly into the page head.
* Note, only known built-in theme can be specified, otherwise the viewer will fail.
* Available built-in themes: "gc-blue", "viewer", "dark", "dark-yellow", "light", "light-blue".
* This option takes precedence over the "theme" option which can be used to specify custom theme.
* @ignore exclude from docs: use theme option, known theme css is required by the theme option automatically.
* @example
* ```javascript
* var viewer = new DsImageViewer(selector, {
* requireTheme: "light"
* });
* ```
**/
requireTheme?: "gc-blue" | "viewer" | "dark" | "dark-yellow" | "light" | "light-blue" | null;
/**
* Undo state storage options.
* @example
* ```javascript
* // Disable undo storage:
* var viewer = new DsImageViewer(selector, {
* undo: false
* });
* ```
* @example
* ```javascript
* // Do not track "Open" and "Close" commands:
* var viewer = new DsImageViewer(selector, {
* undo: { skipCommands: "Open" }
* });
* ```
**/
undo?: UndoStorageOptions | false;
/**
* Zoom control options.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", {
* zoomOptions: {
* minZoom: 0.05,
* maxZoom: 5,
* dropdownZoomFactorValues: [0.05, 0.1, 0.3, 0.5, 0.7, 1, 1.5, 2, 3, 5]
* }
* });
* ```
**/
zoomOptions?: {
/**
* Defines min zoom factor
* @default 0.25 (25%)
**/
minZoom?: number;
/**
* Defines max zoom factor
* @default 3 (300%)
**/
maxZoom?: number;
/**
* Defines zoom factor array to show in Zoom Control Dropdown in Toolbar
* @default [0.5, 1, 1.5, 2, 3]
**/
dropdownZoomFactorValues?: number[];
};
/**
* Default image open parameters.
**/
openParameters?: OpenParameters;
/**
* Second toolbar options.
* @ignore exclude from docs
* @example
* ```javascript
* // Create custom second toolbar with key "custom-toolbar-key":
* var React = viewer.getType("React");
* var toolbarControls =[React.createElement("label", null, "Custom toolbar"),
* React.createElement("button", { onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")];
* // Register custom second toolbar for key "custom-toolbar-key":
* viewer.options.secondToolbar = {
* render: function(toolbarKey) {
* if(toolbarKey === "custom-toolbar-key")
* return toolbarControls;
* return null;
* }
* };
* // Show custom second toolbar:
* viewer.showSecondToolbar("custom-toolbar-key");
* ```
**/
secondToolbar?: {
/**
* Handler method which can be used to render custom second toolbar controls.
* The method should return array of the JSX.Element controls or null.
**/
render?: (toolbarKey: string) => any[] | null;
};
/**
* The logging level used for persistent connections using signalr client.
* Note that the ASP .NET version of the signalr client supports only 'Trace' log level.
* @ignore exclude from docs
**/
logLevel?: LogLevel;
/**
* Zoom by mouse wheel settings.
* @ignore exclude from docs
* @example
* ```javascript
* // Enable zoom with the mouse wheel without pressing the Control or Meta keys:
* var viewer = new DsImageViewer("#root", { zoomByMouseWheel: { always: true } } );
* ```
**/
zoomByMouseWheel?: {
always: boolean;
ctrlKey: boolean;
metaKey: boolean;
};
/**
* Available viewer themes.
* @ignore exclude from docs
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", { themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } );
* ```
**/
themes?: string[];
/**
* Used for theme urls.
* @ignore exclude from docs
* @example
* ```javascript
* var viewer = new DsImageViewer("#root", { baseUrl: "http://localhost/mysite/" });
* ```
**/
baseUrl?: string;
/**
* Keyboard shortcuts. Available built-in keyboard shortcut tool names: "zoomIn" | "zoomOut" | "zoomActualSize" | "zoomPageWidth" | "rotate" | "rotateBackward" |
* "open" | "print" | "undo" | "redo" | "confirmChanges" | "cancelChanges".
* @example
* Override keyboard shortcut "Ctrl +"
* ```javascript
* var viewer = new DsImageViewer("#root", {
* shortcuts: {
* 107: [{
* ctrl: true,
* tool: function(event) {
* viewer.zoom = { mode: 0, factor: viewer.actualZoomFactor + 0.1 };
* event.preventDefault();
* }
* }, {
* meta: true,
* tool: function(event) {
* viewer.zoom = { mode: 0, factor: viewer.actualZoomFactor + 0.1 };
* event.preventDefault();
* }
* }]
* }
* });
* ```
* Remove all default shortcuts
* ```javascript
* var viewer = new DsImageViewer("#root");
* viewer.options.shortcuts = {};
* viewer.applyOptions();
* ```
**/
shortcuts?: {
[keyCode: string]: KeyboardShortcutDefinition | KeyboardShortcutDefinition[];
};
}