@mescius/dsimageviewer
Version:
Document Solutions Image Viewer
1,315 lines (1,314 loc) • 45.4 kB
TypeScript
import { GlobalCursorType, ImageFormatCode, ImageFormatName, LogLevel, OpenParameters, SaveOptions } from './Models/Types';
import { EventFan, PluginModel, ReportViewer, Toolbar, ToolbarLayout, ViewerStatus, ZoomMode } from '@dt/core-viewer';
import * as coreui from "@dt/core-ui";
import { ViewerOptions } from './ViewerOptions';
import { GcMeasurement } from './Utils/GcMeasurement';
import { PanelHandle } from '@dt/core-viewer/types/api/PluginModel';
import ImageReportPlugin from './plugin';
/// <reference path="../vendor/react/react-dom.d.ts" />
//@ts-ignore
import ReactDOM from 'react-dom';
/// <reference path="../vendor/react/react.d.ts" />
//@ts-ignore
import React, { Component } from 'react';
import { LeftSidebar } from './LeftSidebar';
import { DataStorage } from './DataStorage/DataStorage';
import { ImageToolbarLayout } from './Toolbar/ImageToolbarLayout';
import { SecondToolbar } from './Toolbar/SecondToolbar/SecondToolbar';
import { AfterOpenEventArgs, BeforeOpenEventArgs, ErrorEventArgs, EventArgs, EventName, ImagePaintEventArgs } from './Models/EventArgs';
import { ImagePaneView } from './ImageDocumentViewer/ImagePaneView';
import { IViewerPlugin } from './Models/IViewerPlugin';
import { IGcSelectionBox, PointLocation } from './Models/SelectionBoxTypes';
import { SvgIconKey } from './Styles/svgIcons';
import { imageDataToCanvas } from './Utils/ImageUtils';
import { DomActivityIndicator } from './Utils/DomActivityIndicator';
import { UndoStorage } from './Undo/UndoStorage';
import { UndoCommandSupport } from './Undo/Commands';
import { GcPanSupport } from './Utils/GcPanSupport';
import { ShortcutsConfig } from './Keyboard/ShortcutsConfig';
import { IViewerTransactionSupport } from './Models/IViewerTransactionSupport';
import { IEventBus, IImageViewer, SecondToolbarType, WindowKeyboardListener } from './Models/IImageViewer';
import { ConfirmButton } from './Dialogs/Types';
import { IImageLayer } from './Layers/types';
import { Color } from '@dt/core-ui';
import { ColorEditorLocalization } from './Tools/ColorEditor/types';
/// <reference path="../vendor/i18next.d.ts" />
//@ts-ignore
import { i18n } from 'i18next';
/**
* Document Solutions Image Viewer is a fast
* JavaScript based client-side Image Viewer that runs in all major browsers.
* <p>Note that DsImageViewer is the new name for GcImageViewer, with the same API.</p>
* <p>During this transition period we are publishing both versions, but it is recommended that you switch to using DsImageViewer when possible.</p>
* @example
* ```javascript
* var viewer = new DsImageViewer("#root");
* ```
**/
export declare class GcImageViewer extends ReportViewer implements IImageViewer {
private static _i18n;
static _instanceCounter: number;
static instances: any;
static focusedInstance?: GcImageViewer | null;
private _plugin;
private _isUpdating;
private _viewerInstanceId;
/**
* @ignore exclude from doc
**/
readonly in17n: i18n;
private _disposed;
private _eventsDef;
private _fileStorage;
private _plugins;
private _secondToolbarLayout;
private _secondToolbar;
private _toolbarLayout;
private _eventBus;
private _selectionBox;
private _layers;
private _activeLayerIndex;
/**
* DsImageViewer constructor.
* @param element Required. HTML element or CSS selector.
* @param options Optional. Viewer options.
*/
constructor(element: HTMLElement | string, options?: Partial<ViewerOptions>);
/**
* Used by Images Filter plugin.
* @ignore exclude from docs.
**/
pluginPanels: {
[key: string]: {
handle: PluginModel.PanelHandle;
panel: Component<any> | null;
};
};
get actualZoomFactor(): number;
/**
* The ID of the viewer instance.
* Used to get access to the public UI API.
* @example
* ```
*<script>
* API.of(viewer.instanceId).menu.collapse();
*</script>
*```
* @ignore
**/
get instanceId(): string;
set instanceId(id: string);
/**
* The UI component which is used to display the image appearance.
* @ignore exclude from docs
* @class DsImageViewer
**/
get imagePaneView(): ImagePaneView;
/**
* Gets a format type of the opened image.
**/
get imageFormat(): ImageFormatCode;
/**
* Sets a format type of the opened image.
* @ignore exclude from docs.
**/
set imageFormat(imageFormat: ImageFormatCode);
/**
* Indicates whether the viewer has opened the image.
* @example
*```javascript
* var hasImageFlag = viewer.hasImage;
*```
**/
get hasImage(): boolean;
/**
* Gets the active image DPI adaptive natural size.
* This is the image size that will be used to display the image at 100%.
* The adaptiveNaturalSize property is used for the actual size calculations.
**/
get adaptiveNaturalSize(): {
width: number;
height: number;
};
/**
* Gets the actual display size of the active image,
* including the active zoom value.
**/
get actualSize(): {
width: number;
height: number;
};
get isReady(): boolean;
/**
* language - A property that retrieves the standardized language key based on the provided language option.
* The language key is determined by the `options.language` setting.
* @returns {string} Standardized language key (e.g., 'en', 'ja').
*/
get language(): string;
/**
* language - A setter property enabling the configuration of the viewer's language.
* @param {string} lng - The language key to set (e.g., 'en', 'ja', 'auto').
* @ignore Exclude from documentation. Use `options.language` to set the initial language.
*/
set language(lng: string);
/**
* Create at least one image layer which will be used for painting.
**/
ensurePaintLayer(): IImageLayer;
/**
* Remove and dispose image layer given by argument layerOrIndex.
* @param layerOrIndex Image layer or image layer index or image layer name.
**/
removeLayer(layerOrIndex: IImageLayer | number | string): void;
/**
* Remove and dispose all image layers.
**/
removeLayers(): void;
/**
* Image layers. Used for painting.
**/
get layers(): IImageLayer[];
get activeLayerIndex(): number;
set activeLayerIndex(ind: number);
get activeLayer(): IImageLayer | undefined;
/**
* The maximum canvas area size in pixels. Used by editor tools.
* @ignore exclude from docs.
**/
get maxImageSize(): {
width: number;
height: number;
};
/**
* Gets the active image natural size.
* The natural size is the image's width/height if drawn with nothing constraining its width/height,
* this is the number of CSS pixels wide the image will be.
**/
get naturalSize(): {
width: number;
height: number;
};
/**
* The Open parameters that were used to open an image.
**/
get openParameters(): OpenParameters | undefined;
/**
* Viewer options
**/
get options(): Partial<ViewerOptions>;
set options(options: Partial<ViewerOptions>);
get panSupport(): GcPanSupport | undefined;
get selectionBox(): IGcSelectionBox;
/**
* Defines the layout of the toolbar.
* @description
* The full list of the *viewer* specific toolbar items:
* ```javascript
* 'open', '$navigation', 'navigation-auto', '$split', 'zoom', '$fullscreen', 'save', 'about'
* ```
* @example
* ```javascript
* // Customize the toolbar layout:
* viewer.toolbarLayout.viewer.default = ["open", "$zoom", "$fullscreen", "save", "print", "about"];
* viewer.applyToolbarLayout();
* ```
**/
get toolbarLayout(): ImageToolbarLayout;
set toolbarLayout(toolbarLayout: ImageToolbarLayout);
/**
* Command based undo state storage.
* @example
* ```javascript
* const isUndoInProgress = viewer.undoStorage.undoInProgress;
* ```
**/
get undoStorage(): UndoStorage;
/**
* Gets a value indicating whether the image viewer can undo changes.
* @example
* ```javascript
* if(viewer.hasUndo) {
* viewer.undo();
* }
* ```
**/
get hasUndo(): boolean;
/**
* Gets a value indicating whether the image viewer can redo changes.
* @example
* ```javascript
* if(viewer.hasRedo) {
* viewer.redo();
* }
* ```
* */
get hasRedo(): boolean;
/**
* Gets current undo level index.
* @example
* ```javascript
* alert("The current Undo level index is " + viewer.undoIndex);
* ```
* */
get undoIndex(): number;
/**
* Gets total undo levels count.
* @example
* ```javascript
* alert("Undo levels count is " + viewer.undoCount);
* ```
* */
get undoCount(): number;
/**
* Returns the current version of the DS Image viewer.
* @example
* ```javascript
* alert("The DsImageViewer version is " + viewer.version);
* ```
* */
get version(): string;
/**
* Gets i18next instance which can be used to add viewer translations.
* See https://www.i18next.com for details about i18next framework.
* @ignore temporary exclude from docs
* @example
* ```javascript
* function loadImageViewer(selector) {
* // You can load translations from any source (see en-image-viewer.json for an example):
* var myTranslations = {
* "toolbar": {
* "open": "Open image"
* }
* };
* // Initialize translations:
* DsImageViewer.i18n.init({
* resources: { myLang: { viewer: myTranslations } },
* defaultNS: 'viewer'
* }).then(function(t) {
* // New translations initialized and ready to go!
* // Now create Image viewer:
* var viewer = new DsImageViewer(selector, { language: 'myLang' });
*
* //viewer.open("sample.png");
* });
* }
* loadImageViewer('#root');
* ```
**/
static get i18n(): i18n;
/**
* Gets or sets the active frame index.
* This is applicable for multi-frame images such as TIFF and ICO.
*
* When setting this value, it will also be used as the initial frame index when opening a new image.
*
* @example
* ```javascript
* var viewer = new DsImageViewer('#root');
* viewer.frameIndex = 9;
* viewer.open('Test.ico');
* ```
**/
get frameIndex(): number;
set frameIndex(val: number);
/**
* Gets total frames count for the active image. Applicable for TIFF, ICO images.
* @example
* ```javascript
* var viewer = new DsImageViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The image opened. Total number of frames: " + viewer.framesCount);
* });
* viewer.open('Test.png');
* ```
**/
get framesCount(): number;
/**
* Gets/sets the current zoom percentage level.
* @ignore exclude from docs
* @example
* ```javascript
* // Set zoom value to 150%
* viewer.zoomValue = 150;
* ```
**/
set zoomValue(val: number);
get zoomValue(): number;
/**
* Gets/sets the current zoom node.
* Accepted values are: 0 - Value, 1 - PageWidth, 2 - WholePage.
* @ignore exclude from docs
* @example
* ```javascript
* // Set zoom mode to 'Whole Image'
* viewer.zoomMode = 2;
* ```
**/
set zoomMode(val: ZoomMode);
get zoomMode(): ZoomMode;
/**
* Image viewer event bus.
* @example
* ```javascript
* viewer.eventBus.on("after-open", function(args) {
* console.log("Image opened.", args);
* });
* viewer.open('Test.png');
* ```
**/
get eventBus(): IEventBus;
/**
* The event raised when the user changes the viewer theme.
* @example
* ```javascript
* var viewer = new DsImageViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The image opened.");
* });
* viewer.open('Test.png');
* ```
**/
get onAfterOpen(): EventFan<AfterOpenEventArgs>;
/**
* Occurs immediately before the image opens.
* @example
* ```javascript
* var viewer = new DsImageViewer('#root');
* viewer.onBeforeOpen.register(function(args) {
* alert("A new image will be opened,\n payload type(binary or URL): " + args.type +",\n payload(bytes or string): " + args.payload);
* });
* viewer.open('Test.png');
* ```
**/
get onBeforeOpen(): EventFan<BeforeOpenEventArgs>;
/**
* The event indicating error.
* @example
* ```javascript
* function handleError(args) {
* console.error(args);
* }
* var viewer = new DsImageViewer('#root');
* viewer.onError.register(handleError);
* viewer.open('Test.png');
* ```
**/
get onError(): EventFan<ErrorEventArgs>;
/**
* The event raised when appearance image element changed.
**/
get onImagePaint(): EventFan<ImagePaintEventArgs>;
/**
* Update the SVG icon react element.
* @ignore exclude from docs
* @param iconKey
* @param svgIcon
*/
static updateSvgIcon(iconKey: SvgIconKey, svgIcon: Element | string): void;
/**
* Get SVG icon react element.
* @ignore exclude from docs
* @param iconKey
**/
static getSvgIcon(iconKey: SvgIconKey): Element;
/**
* Call this method in order to apply changed options.
* @example
* ```javascript
* viewer.applyOptions();
* ```
**/
applyOptions(): void;
/**
* Call this method in order to apply changes in @see:toolbarLayout.
* @example
* ```javascript
* viewer.toolbarLayout.viewer.default = ["open", "save"];
* viewer.applyToolbarLayout();
* ```
* @example
* ```javascript
* var viewer = new DsImageViewer(document.querySelector("#viewer"));
* var toolbar = viewer.toolbar;
* var toolbarLayout = viewer.toolbarLayout;
* toolbar.addItem({
* key: 'custom-action',
* icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></svg>' },
* title: 'Custom action',
* checked: false, enabled: false,
* action: function () {
* alert("Implement your action here.");
* },
* onUpdate: function (args) {
* return {
* enabled: true,
* checked: false,
* title: 'Custom action title'
* }
* }
* });
* toolbarLayout.viewer.default.splice(0, 0, "custom-action");
* viewer.applyToolbarLayout();
* ```
**/
applyToolbarLayout(): void;
/**
* Add plug-in instance which is used to add new functionality to the DsImageViewer.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root");
* var rotationPlugin = new RotationPlugin();
* viewer.addPlugin(rotationPlugin);
* ```
* @param plugin
**/
addPlugin(plugin: IViewerPlugin): boolean;
private _keyboardListeners;
private _onWindowKeydownHandler?;
private _onWindowKeyupHandler?;
altPressed: boolean;
ctrlPressed: boolean;
shiftPressed: boolean;
spacePressed: boolean;
/**
* Add window keyboard listener.
* @param uniqueKey
* @param selectionBoxHandler
*/
addKeyboardListener(uniqueKey: string, handler: WindowKeyboardListener): void;
private onWindowKeyDown;
private onWindowKeyUp;
/**
* Remove window keyboard listener.
* @param uniqueKey
*/
removeKeyboardListener(uniqueKey: string): void;
raiseKeyDown(event: KeyboardEvent): void;
raiseKeyUp(event: KeyboardEvent): void;
/**
* Used preliminarily by the plugin developers to configure the main toolbar layout.
*
* @param pos - The position where the buttons should be inserted. Use `false` or `-1` to skip insertion. Undefined means the position will be determined automatically.
* @param buttonsToInsert - An array of button keys to be inserted.
* @param pluginType - The type of the plugin. It can be one of the following: "PaintTools", "PageTools", or "ImageFilters".
*
* @example
* // Apply a custom layout to insert "zoomIn" and "zoomOut" buttons at position 2 for the "PaintTools" plugin.
* viewer.configurePluginMainToolbar(2, ["zoomIn", "zoomOut"]);
*
* @returns void
*/
configurePluginMainToolbar(pos: number | boolean | undefined, buttonsToInsert: string[]): void;
/**
* Retrieves the point location from the pointer event provided by the 'event' parameter.
* The returned point is relative to the active canvas element
* @param event DOM Pointer or Mouse event object.
**/
getEventCanvasPoint(event: PointerEvent | MouseEvent, includeDpi?: boolean): PointLocation;
/**
* @ignore exclude from docs.
**/
renderColorDropdown(colorValue: Color | null | undefined, onSelect: (color: Color) => void, localization: ColorEditorLocalization, refCallback: any, settings?: {
size?: 'small' | 'default' | 'large';
includeOpacity?: boolean;
disabled?: boolean;
}): JSX.Element;
/**
* Sets the cursor style for the image viewer
* @param {GlobalCursorType} cursorType - The cursor style to apply
* @returns {void}
* @example
* // Set rotate cursor during image rotation
* viewer.setCursor('rotate');
*
* @example
* // Set resize cursor when hovering over edges
* viewer.setCursor('nwse-resize');
*
* @see GlobalCursorType for all available cursor options
*/
setCursor(cursorType: GlobalCursorType): IImageViewer;
/**
* Resets the cursor to default style
* @returns {void}
* @example
* // Reset cursor when operation completes
* viewer.resetCursor();
*
* @example
* // Reset cursor on mouse leave
* viewerElement.addEventListener('mouseleave', () => {
* viewer.resetCursor();
* });
*/
resetCursor(): IImageViewer;
/**
* Toggles between specified cursor and default style
* @param {GlobalCursorType | false} cursorType - Cursor style to apply, or false to reset
* @returns {void}
* @example
* // Toggle grab cursor during drag operations
* viewer.toggleCursor(isDragging ? 'grab' : false);
*
* @example
* // Toggle zoom cursor based on modifier key
* document.addEventListener('keydown', (e) => {
* if (e.ctrlKey) {
* viewer.toggleCursor('zoom-in');
* }
* });
*
*/
toggleCursor(cursorType: GlobalCursorType | false): IImageViewer;
/**
* Load image data using given data url.
**/
dataUrlToImageData(dataUrl: string, destinationSize?: {
width: number;
height: number;
}): Promise<ImageData>;
/**
* Display confirmation dialog.
* @example
* ```javascript
* const confirmResult = await viewer.confirm("Apply changes?", "info", "Confirm action", ["Yes", "No", "Cancel"]);
* if (confirmResult === "Yes") {
* // put your code here
* } else if (confirmResult === "No") {
* // put your code here
* } else {
* // put your code here
* }
* ```
**/
confirm(confirmationText?: string | JSX.Element, level?: "info" | "warning" | "error", title?: string, buttons?: ConfirmButton[]): Promise<boolean | ConfirmButton>;
onFocus(): void;
onBlur(): void;
/**
* Remove plug-in instance from the DsImageViewer.
* @example
* ```javascript
* var viewer = new DsImageViewer("#root");
* var rotationPlugin = new RotationPlugin();
* viewer.addPlugin(rotationPlugin);
*
* viewer.removePlugin(rotationPlugin.id);
* ```
* @param pluginId Plugin id or plugin instance.
**/
removePlugin(pluginId: string | IViewerPlugin): void;
/**
* Show about dialog.
**/
showAbout(): void;
/**
* Finds a viewer plugin by its id.
* @example
* ```javascript
* // find imageFilters plugin:
* var imageFilters = viewer.findPlugin("imageFilters");
* // find pageTools plugin:
* var pageTools = viewer.findPlugin("pageTools");
* ```
* @param pluginId
*/
findPlugin(pluginId: string): IViewerPlugin | null;
/**
* Remove all plug-ins.
* @example
* ```javascript
* viewer.removePlugins();
* ```
**/
removePlugins(): void;
/**
* Clear undo storage.
**/
clearUndo(): void;
/**
* Execute a new command.
* @param {type} command Instance of a CommandBase.
* @returns {Promise}
**/
executeCommand(command: UndoCommandSupport): Promise<void>;
/**
* Create new empty image.
* @example
* ```javascript
* await viewer.newImage({ width: 300, height: 300, fileName: "myImage.png" });
* ```
* @param options
*/
newImage(options?: {
width?: number;
height?: number;
} & OpenParameters): Promise<any>;
canvasToDataURL(canvas: HTMLCanvasElement): string;
get imageFormatSupportsTransparency(): boolean;
performTransparencyConversionCheck(message: string): Promise<boolean>;
/**
* Open Image document.
* @param file
* URL to Image document(string) or binary data(Typed array - Uint8Array).
* @param openParameters Loading parameters object.
* @example
* ```javascript
* viewer.open("Images/HelloWorld.png");
* ```
**/
open(file?: any | string | URL | Uint8Array | Array<number>, openParameters?: OpenParameters | ImageFormatName | ImageFormatCode): Promise<any>;
/**
* Use this method to close and release resources occupied by the DsImageViewer.
**/
dispose(): void;
/**
* Play GIF animation.
* @ignore deprecated
* @example
* ```javascript
* DsImageViewer.findControl("#root").playAnimation();
* ```
**/
playAnimation(): void;
/**
* Show activity spinner.
* @example
* ```javascript
* viewer.showActivitySpinner();
* ```
**/
showActivitySpinner(container?: HTMLElement): void;
/**
* Hide activity spinner.
* @example
* ```javascript
* viewer.hideActivitySpinner();
* ```
**/
hideActivitySpinner(): void;
/**
* Start GIF animation.
* @example
* ```javascript
* DsImageViewer.findControl("#root").startAnimation();
* ```
**/
startAnimation(): void;
/**
* Stop GIF animation.
* @example
* ```javascript
* DsImageViewer.findControl("#root").stopAnimation();
* ```
**/
stopAnimation(): void;
/**
* Toggle GIF animation.
* @example
* ```javascript
* DsImageViewer.findControl("#root").toggleAnimation();
* ```
**/
toggleAnimation(): void;
/**
* Undo changes.
* @example
* ```javascript
* if(viewer.hasUndo) {
* viewer.undo();
* }
* ```
**/
undo(): Promise<void>;
/**
* Redo changes.
* @example
* ```javascript
* if(viewer.hasRedo) {
* viewer.redo();
* }
* ```
**/
redo(): Promise<void>;
/**
* Get event object.
* @example
* ```javascript
* viewer.getEvent("CustomEvent").register(function(args) {
* console.log(args);
* });
* ```
* @param eventName
*/
getEvent(eventName: EventName): EventFan<any>;
/**
* Trigger event.
* @param eventName
* @param args
* @example
* ```javascript
* // Listen CustomEvent:
* viewer.getEvent("CustomEvent").register(function(args) {
* console.log(args);
* });
* // Trigger CustomEvent:
* viewer.triggerEvent("CustomEvent", { arg1: 1, arg2: 2});
* ```
**/
triggerEvent(eventName: EventName, args?: EventArgs | BeforeOpenEventArgs | AfterOpenEventArgs | ImagePaintEventArgs | any): void;
transaction?: IViewerTransactionSupport;
/**
* Start transaction.
* @ignore exclude from docs
**/
setTransaction(transaction: IViewerTransactionSupport): void;
/**
* Commit active transaction.
* @ignore exclude from docs
**/
confirmChanges(): Promise<void>;
/**
* Cancel active transaction.
* @ignore exclude from docs
**/
cancelChanges(): Promise<void | boolean>;
/**
* Clear active transaction.
* @ignore exclude from docs
**/
clearTransaction(transaction: IViewerTransactionSupport): void;
/**
* Gets the viewer instance using the host element or host element selector
* @example
* ```javascript
* var viewer = DsImageViewer.findControl("#root");
* ```
* @param selector
*/
static findControl(selector: string | HTMLElement): GcImageViewer | undefined;
/**
* Get unmodified current image data url.
**/
getOriginalImageDataUrl(): string;
/**
* Get current image data url.
**/
getImageDataUrl(): string;
/**
* Modify current image data url.
**/
setImageDataUrl(dataUrl: any): Promise<void>;
/**
* Second toolbar API.
* @ignore exclude from docs
**/
get secondToolbar(): SecondToolbar;
/**
* Second toolbar mode name (toolbar key).
* @ignore exclude from docs
*/
get secondToolbarMode(): SecondToolbarType;
/**
* Ensures that all visual child elements of the viewer are properly updated for layout.
* Call this method to update the size of the inner content when the viewer is dynamically resized.
* @ignore exclude from docs
* @example
* ```javascript
* viewer.eventBus.on("viewersizechanged", function() {
* // Make viewer height equal to content height of inner pages, including the margins:
* document.querySelector("#root").style.height = viewer.pageCount * 50 + viewer.pageCount * viewer.getPageSize(0, true).height + "px";
* // Invalidate layout:
* viewer.invalidate();
* });
* ```
**/
invalidate(): void;
/**
* Displays a second toolbar specified by the toolbarKey argument.
* @param {string} toolbarKey - The key identifying the specific second toolbar to show.
* @example
* ```javascript
* // Show the page tools toolbar
* viewer.showSecondToolbar("page-tools");
* ```
**/
showSecondToolbar(toolbarKey: SecondToolbarType): Promise<void>;
/**
* Hides the second toolbar.
* This method deactivates any active editor mode associated with the second toolbar and then hides the toolbar itself.
* @param {string} [toolbarKey] - Optional. The key identifying the specific second toolbar to hide. If provided, only hides the specified toolbar if it exists.
* @returns {Promise<void>} A Promise that resolves once the second toolbar is successfully hidden.
* @example
* ```javascript
* // Hide the second toolbar
* viewer.hideSecondToolbar();
* ```
* @example
* ```javascript
* // Hide a specific second toolbar by passing its key
* viewer.hideSecondToolbar("page-tools");
* ```
**/
hideSecondToolbar(toolbarKey?: SecondToolbarType): Promise<void>;
/**
* Activate editor mode. This method is designed to be used by control developers.
* @ignore exclude from docs.
* @param caller
**/
activateEditorMode(caller: "SecondBar" | "FormEditor" | "AnnotationEdtor"): void;
/**
* Deactivate editor mode. This method is designed to be used by control developers.
* @ignore exclude from docs.
* @param caller
**/
deactivateEditorMode(caller: "SecondBar" | "ViewerLayout"): void;
/**
* @ignore exclude from docs
* @param method
* @param message
*/
logError(method: string, message: string): void;
/**
* @ignore exclude from docs
* @param method
* @param message
*/
logDebug(method: string, message: string): void;
/**
* Closes the currently open image.
* @ignore exclude from docs
* @example
* ```javascript
* await viewer.close();
* ```
**/
close(): Promise<void>;
/**
* Show the file open dialog where the user can select the Image file.
* @example
* ```javascript
* viewer.openLocalFile();
* ```
* */
openLocalFile(): any;
/**
* Opens the browser's print document dialog box.
* @ignore exclude from docs
* @example
* ```javascript
* viewer.print();
* ```
* */
print(): void;
/**
* Downloads the Image document loaded in the Viewer to the local disk.
* @deprecated Deprecated since v1.2.0-a6 in favor of the `save` method.
* @param fileName the destination file name.
* @param {boolean} [original=false] - Flag indicating whether to use the original image for save. Defaults to `false`.
**/
download(fileName?: string, original?: boolean): void;
/**
* Saves the Image document loaded in the Viewer to the local disk.
* @param {string | SaveOptions} [options] - The save options, including the destination file name and other settings.
* @param {boolean} [original=false] - Flag indicating whether to use the initial version of the image for save. Defaults to `false`.
* @example
* ```javascript
* // Example: Save the modified image without using specific options.
* const viewer = DsImageViewer.findControl("#root");
* viewer.save();
* ```
* @example
* ```javascript
* // Example: Save the modified image as "image.png".
* const viewer = DsImageViewer.findControl("#root");
* viewer.save({ fileName: "image.png" });
* ```
* @example
* ```javascript
* // Example: Download the original version of the image as "original_image.jpg".
* const viewer = DsImageViewer.findControl("#root");
* viewer.save({ fileName: "original_image.jpg", original: true });
* ```
* @example
* ```javascript
* // Example: Save the modified image in PNG format.
* const viewer = DsImageViewer.findControl("#root");
* viewer.save({ convertToFormat: "image/png" });
* ```
* @example
* ```javascript
* // Example: Save the modified image with a custom file name and in JPEG format.
* const viewer = DsImageViewer.findControl("#root");
* viewer.save({ fileName: "custom_name", convertToFormat: "image/jpeg" });
* ```
**/
save(options?: string | SaveOptions, original?: boolean): void;
raiseStateChanged(): void;
/**
* Gets the scroll view HTML element.
* Note, usually, you don't need to change scroll position manually,
* the scroll position is calculated by the viewer automatically.
* @ignore exclude from docs
* @example
* ```javascript
* // Scroll to the top of the document:
* viewer.scrollViewElement.scrollTop = 0;
* ```
**/
get scrollViewElement(): HTMLElement;
/**
* Set active viewer theme.
* @ignore exclude from docs
* @param theme theme name, specified in themes option.
* @example
* ```javascript
* viewer.setTheme("themes/light-blue");
* ```
**/
setTheme(theme?: string): void;
/**
* Suspends notifications until the next call to @see:endUpdate.
* @ignore exclude from docs
* @example viewer.beginUpdate();
* @deprecated
*/
beginUpdate(): void;
/**
* Resumes notifications suspended by calls to @see:beginUpdate.
* @ignore exclude from docs
* @example viewer.endUpdate();
* @deprecated
*/
endUpdate(): void;
/**
* Returns true if notifications suspended by calls to @see:beginUpdate.
* @ignore exclude from docs
* @example var isUpdatingFlag = viewer.isUpdating;
**/
get isUpdating(): boolean;
/**
* Gets a value indicating whether the image animation has started.
* @example
* ```javascript
* // Toggle image animation:
* const viewer = DsImageViewer.findControl("#root");
* if(viewer.isAnimationStarted) {
* viewer.stopAnimation();
* } else {
* viewer.startAnimation();
* }
* ```
**/
get isAnimationStarted(): boolean;
/**
* Product license key.
* @ignore exclude from docs.
* @example
* ```
* // Add your license
* DsImageViewer.LicenseKey = 'XXX';
* // Add your code
* const viewer = new DsImageViewer("#viewer");
*```
**/
static LicenseKey: string;
/**
* Specifies the current user name.
* @ignore exclude from docs
* @example
* ```javascript
* viewer.currentUserName = "John";
* ```
* @example
* ```javascript
* alert("The current user name is " + viewer.currentUserName);
* ```
* */
get currentUserName(): string;
set currentUserName(userName: string);
/**
* Gets the file data. Available when keepFileData option is set to true.
* @ignore exclude from docs
* @example
* ```javascript
* var viewer = new DsImageViewer('#root', { keepFileData: true });
* viewer.open('Test.png');
* viewer.onAfterOpen.register(function() {
* var imageFileData = viewer.fileData;
* });
* ```
**/
get fileData(): Uint8Array | null;
/**
* Gets the file name that was used to open the image.
* The file name is determined as follows:
* - if a local file was opened using the "Open File" dialog, returns the local file name;
* - else, if a new file was created using the "newImage" method, returns the argument passed to that method;
* - else, if options.friendlyFileName is not empty, returns its value;
* - else, returns the name generated based on current date.
* @ignore exclude from docs
* @example
* ```javascript
* var viewer = new DsImageViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The document is opened, the fileName is " + viewer.fileName);
* });
* viewer.open('MyDocuments/Test.png');
* ```
**/
get fileName(): string;
/**
* Gets the URL that was used to open the document.
* Returns an empty string when the document was opened from binary data.
* @ignore exclude from docs
* @example
* ```javascript
* var viewer = new DsImageViewer('#root');
* viewer.onAfterOpen.register(function() {
* alert("The document is opened, the fileUrl is " + viewer.fileUrl);
* });
* viewer.open('MyDocuments/Test.png');
* ```
**/
get fileUrl(): string;
/**
* Left sidebar API.
* @ignore exclude from docs
* @example
* ```javascript
* viewer.leftSidebar.hide();
* ```
**/
get leftSidebar(): LeftSidebar;
/**
* Data storage for the active document.
* @ignore exclude from docs
* @example
* ```javascript
* const fileData = viewer.storage.getItem(annotation.fileId);
* ```
* @example
* ```javascript
* viewer.storage.setItem(fileId, bytes);
* ```
**/
get storage(): DataStorage;
/**
* Indicates whether the document is loaded into view.
* @ignore exclude from docs
* @example
* ```javascript
* if(!viewer.hasDocument) {
* viewer.open("sample.png");
* }
* ```
**/
get hasDocument(): boolean;
/**
* Gets current log level. Available log levels are: 'None', 'Critical', 'Error', 'Warning', 'Information', 'Debug', 'Trace'. Default level is 'None'.
* @ignore exclude from docs
**/
get logLevel(): LogLevel;
set logLevel(logLvel: LogLevel);
/**
* Get viewer type by type name.
* @ignore exclude from docs
* @param typeName
* @example
* ```javascript
* // Get image utilities:
* var ImageUtils = viewer.getType('ImageUtils');
* ```
*/
getType(typeName: string): typeof React | typeof ReactDOM | typeof GcImageViewer | typeof coreui | typeof ImageReportPlugin | typeof ZoomMode | typeof ViewerStatus | typeof ViewerOptions | typeof Toolbar | typeof GcMeasurement | {
cropImage: typeof import("./Utils/ImageUtils").cropImage;
resizeImage: typeof import("./Utils/ImageUtils").resizeImage;
resizeImageDataUrl: typeof import("./Utils/ImageUtils").resizeImageDataUrl;
currentDisplayPxPerInch: typeof import("./Utils/ImageUtils").currentDisplayPxPerInch;
getImageNaturalSize: typeof import("./Utils/ImageUtils").getImageNaturalSize;
imageDataToCanvas: typeof imageDataToCanvas;
setDpiAdaptiveSize: typeof import("./Utils/ImageUtils").setDpiAdaptiveSize;
getDpiAdaptiveSize: typeof import("./Utils/ImageUtils").getDpiAdaptiveSize;
copyImageCanvasToClipboard: typeof import("./Utils/ImageUtils").copyImageCanvasToClipboard;
getImageCanvasFromClipboard: typeof import("./Utils/ImageUtils").getImageCanvasFromClipboard;
} | {
about: JSX.Element;
'severity-info': JSX.Element;
'severity-warning': JSX.Element;
'severity-error': JSX.Element;
save: JSX.Element;
'backup-objects': JSX.Element;
'restore-objects': JSX.Element;
rotate: JSX.Element;
'flip-horizontal': JSX.Element;
'flip-vertical': JSX.Element;
'crop-image': JSX.Element;
'resize-image': JSX.Element;
'magnify-minus-outline': JSX.Element;
'magnify-plus-outline': JSX.Element;
magnify: JSX.Element;
open: JSX.Element;
'page-tools': JSX.Element;
'paint-tools': JSX.Element;
'text-tools': JSX.Element;
effects: JSX.Element;
objects: JSX.Element;
'paint-undo': JSX.Element;
'paint-redo': JSX.Element;
'remove-attachment': JSX.Element;
'select-region': JSX.Element;
download: JSX.Element;
QuickSelection: JSX.Element;
FreeSelection: JSX.Element;
RectangularSelection: JSX.Element;
EllipticalSelection: JSX.Element;
PolygonalSelection: JSX.Element;
ColorSelection: JSX.Element;
SubjectSelection: JSX.Element;
pencil: JSX.Element;
brush: JSX.Element;
eraser: JSX.Element;
text: JSX.Element;
'font-bold': JSX.Element;
'font-italic': JSX.Element;
'clone-stamp': JSX.Element;
'foreground-color': JSX.Element;
'image-filter-tools': JSX.Element;
'filter-blur': JSX.Element;
'filter-pixelate': JSX.Element;
'filter-brightness': JSX.Element;
'filter-contrast': JSX.Element;
'filter-vibrance': JSX.Element;
'filter-brightness-contrast': JSX.Element;
print: JSX.Element;
'edit-undo': JSX.Element;
'edit-redo': JSX.Element;
'aspect-ratio': JSX.Element;
chevron: JSX.Element;
'chevron-accent': JSX.Element;
'animated-spinner': JSX.Element;
'drag-handle': JSX.Element;
keyboard: JSX.Element;
image: JSX.Element;
rectangle: JSX.Element;
ellipse: JSX.Element;
line: JSX.Element;
arrow: JSX.Element;
brackets: JSX.Element;
properties: JSX.Element;
'theme-change': JSX.Element;
'new-document': JSX.Element;
'new-page': JSX.Element;
'delete-page': JSX.Element;
pan: JSX.Element;
'doc-properties': JSX.Element;
'context-copy': JSX.Element;
'context-paste': JSX.Element;
'context-cut': JSX.Element;
'context-delete': JSX.Element;
'arrow-expand-horizontal': JSX.Element;
'arrow-expand-all': JSX.Element;
'resize-handle-h': JSX.Element;
close: JSX.Element;
'reset-values': JSX.Element;
done: JSX.Element;
'file-png': JSX.Element;
'file-jpeg': JSX.Element;
'file-tiff': JSX.Element;
'file-gif': JSX.Element;
'file-bmp': JSX.Element;
'file-webp': JSX.Element;
} | null;
/**
* Gets the Image plug-in.
* @ignore exclude from docs
**/
get plugin(): ImageReportPlugin;
/**
* Second toolbar layout.
* Use the secondToolbarLayout property to configure available tools.
* @ignore exclude from docs
**/
get secondToolbarLayout(): {
[toolbarKey: string]: string[];
};
set secondToolbarLayout(layout: {
[toolbarKey: string]: string[];
});
get shortcutsConfig(): ShortcutsConfig;
/**
* Occurs when the viewer theme changed by user.
* @ignore exclude from docs
* @example
* ```javascript
* var viewer = new DsImageViewer(selector, {
* requireTheme: localStorage.getItem('demo_theme') || 'viewer'
* });
* viewer.onThemeChanged.register(function(args) {
* localStorage.setItem('demo_theme', args.theme);
* });
* ```
**/
get onThemeChanged(): EventFan<AfterOpenEventArgs>;
/**
* Opens the side panel.
* @ignore exclude from docs
* @param panelHandleOrId Panel handle or panel id to open.
* @example
* ```javascript
* const layersPanelHandle = viewer.addLayersPanel();
* viewer.open("house-plan.png").then(()=> {
* viewer.openPanel(layersPanelHandle);
* });
* ```
*/
openPanel(panelHandleOrId: PanelHandle | string): void;
/**
* Closes the side panel.
* @ignore exclude from docs
* @param panelHandleOrId Optional. Panel handle or panel id to close.
* @example
* ```javascript
* viewer.closePanel();
* ```
*/
closePanel(panelHandleOrId?: PanelHandle | string): void;
/**
* Ask the user if he want to leave the page when document is modified.
* @ignore exclude from docs
* @example
* ```javascript
* var viewer = new DsImageViewer('#root');
* viewer.beforeUnloadConfirmation = true;
* ```
**/
get beforeUnloadConfirmation(): boolean;
set beforeUnloadConfirmation(enable: boolean);
/**
* Defines the toolbar items layout (order and visibility) for different view states.
* A parameter is an object with default, full-screen, mobile mode properties
* (each property is an array of items to be shown in specific views).
* Setting to default will only affect all modes (full-screen, mobile) if they are not specified externally.
* @param layout
* @deprecated This method is deprecated. Please, use toolbarLayout property, instead.
* @ignore exclude from doc
**/
updateLayout(layout: ToolbarLayout): void;
/**
* Shows the message for the user.
* @param message
* @param details
* @param severity
*/
showMessage(message: string, details?: string, severity?: "error" | "warn" | "info" | "debug"): void;
raiseError(message: string): void;
/**
* @ignore exclude from docs
**/
clearMessages(): void;
_domActivityIndicator: DomActivityIndicator;
onLoadProgress(percent?: number): void;
get domActivityIndicator(): DomActivityIndicator;
private _getEventFan;
private static _init_i18n;
}