IImageViewer
Interface: IImageViewer
Interface describing the ImageViewer API, primarily utilized for control/plugin development purposes.
Properties
in17n
readonly in17n: i18n;
i18next instance.
toggleSidebar()
toggleSidebar: (show?) => void;
Sets of toggles sidebar's panels visibility
Parameters
show?
boolean
Returns
void
toolbarLayout
toolbarLayout: ImageToolbarLayout;
Defines the layout of the toolbar.
Description
The full list of the viewer specific toolbar items:
'open', '$navigation', '$split', 'zoom', '$fullscreen', 'save', 'about'
Example
// Customize the toolbar layout:
viewer.toolbarLayout.viewer.default = ["open", "$zoom", "$fullscreen", "save", "print", "about"];
viewer.applyToolbarLayout();
Accessors
eventBus
Get Signature
get eventBus(): IEventBus;
Image viewer event bus.
Example
viewer.eventBus.on("after-open", function(args) {
console.log("Image opened.", args);
});
viewer.open('Test.png');
Returns
hasImage
Get Signature
get hasImage(): boolean;
Indicates whether the viewer has opened the image.
Example
var hasImageFlag = viewer.hasImage;
Returns
boolean
hostElement
Get Signature
get hostElement(): Element;
Outermost viewer's host element containing the gc-viewer-host class.
Returns
Element
imageFormat
Get Signature
get imageFormat(): ImageFormatCode;
Gets a format type of the opened image.
Returns
Set Signature
set imageFormat(format): void;
Sets a format type of the opened image.
Parameters
format
Returns
void
isFullscreen
Get Signature
get isFullscreen(): boolean;
Gets a value indicating full screen mode.
Returns
boolean
isToolbarHidden
Get Signature
get isToolbarHidden(): boolean;
Gets a value indicating whether the toolbar is hidden.
Returns
boolean
layers
Get Signature
get layers(): IImageLayer[];
Image layers. Used for painting.
Returns
naturalSize
Get Signature
get naturalSize(): object;
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.
Returns
object
height
height: number;
width
width: number;
onBeforeOpen
Get Signature
get onBeforeOpen(): EventFan<BeforeOpenEventArgs>;
Occurs immediately before the image opens.
Example
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');
Returns
EventFan<BeforeOpenEventArgs>
undoStorage
Get Signature
get undoStorage(): IUndoStorage;
Command based undo state storage.
Example
const isUndoInProgress = viewer.undoStorage.undoInProgress;
Returns
Methods
addKeyboardListener()
addKeyboardListener(uniqueKey, handler): any;
Add window keyboard listener.
Parameters
uniqueKey
string
handler
Returns
any
applyToolbarLayout()
applyToolbarLayout(): any;
Call this method in order to apply changes in @see:toolbarLayout.
Returns
any
Examples
viewer.toolbarLayout.viewer.default = ["open", "save"];
viewer.applyToolbarLayout();
var viewer = new GcImageViewer(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();
configurePluginMainToolbar()
configurePluginMainToolbar(pos, buttonsToInsert): any;
Used preliminarily by the plugin developers to configure the main toolbar layout.
Parameters
pos
The position where the buttons should be inserted. Use false or -1 to skip insertion. Undefined means the position will be determined automatically.
number | boolean
buttonsToInsert
string[]
An array of button keys to be inserted.
Returns
any
void
Example
// Apply a custom layout to insert "zoomIn" and "zoomOut" buttons at position 2 for the "PaintTools" plugin.
viewer.configurePluginMainToolbar(2, ["zoomIn", "zoomOut"]);
confirm()
confirm(
confirmationText?,
level?,
title?,
buttons?): Promise<boolean | ConfirmButton>;
Display confirmation dialog.
Parameters
confirmationText?
string | Element
level?
"error" | "info" | "warning"
title?
string
buttons?
Returns
Promise<boolean | ConfirmButton>
dataUrlToImageData()
dataUrlToImageData(dataUrl, destinationSize?): Promise<ImageData>;
Load image data using given data url.
Parameters
dataUrl
string
destinationSize?
height
number
width
number
Returns
Promise<ImageData>
ensurePaintLayer()
ensurePaintLayer(): IImageLayer;
Create at least one image layer which will be used for painting.
Returns
findPlugin()
findPlugin(pluginId): IViewerPlugin;
Finds a viewer plugin by its id.
Parameters
pluginId
string
Returns
Example
// find imageFilters plugin:
var imageFilters = viewer.findPlugin("imageFilters");
// find pageTools plugin:
var pageTools = viewer.findPlugin("pageTools");
getEventCanvasPoint()
getEventCanvasPoint(event): PointLocation;
Retrieves the point location from the pointer event provided by the 'event' parameter. The returned point is relative to the active canvas element
Parameters
event
DOM Pointer or Mouse event object.
PointerEvent | MouseEvent
Returns
getImageDataUrl()
getImageDataUrl(): string;
Get current image data url.
Returns
string
getOriginalImageDataUrl()
getOriginalImageDataUrl(): string;
Get unmodified current image data url.
Returns
string
getPanelState()
getPanelState(panelKey): any;
Gets the current panel state.
Parameters
panelKey
PanelHandle
Returns
any
hideActivitySpinner()
hideActivitySpinner(): any;
Hide activity spinner.
Returns
any
Example
viewer.hideActivitySpinner();
layoutPanels()
layoutPanels(layout): void;
Orders and filters panel items. '*' indicates "the rest of panels". 'sep'/'separator' indicated menu separator.
Parameters
layout
string[]
Returns
void
removeKeyboardListener()
removeKeyboardListener(uniqueKey): any;
Remove window keyboard listener.
Parameters
uniqueKey
string
Returns
any
removeLayer()
removeLayer(layerOrIndex): any;
Remove and dispose image layer given by argument layerOrIndex.
Parameters
layerOrIndex
Image layer or image layer index or image layer name.
number | IImageLayer
Returns
any
removeLayers()
removeLayers(): any;
Remove and dispose all image layers.
Returns
any
resetCursor()
resetCursor(): IImageViewer;
Resets the cursor to default style
Returns
IImageViewer
Examples
// Reset cursor when operation completes
viewer.resetCursor();
// Reset cursor on mouse leave
viewerElement.addEventListener('mouseleave', () => {
viewer.resetCursor();
});
save()
save(options?, original?): void;
Saves the Image document loaded in the Viewer to the local disk.
Parameters
options?
The save options, including the destination file name and other settings.
string | SaveOptions
original?
boolean
Flag indicating whether to use the initial version of the image for save. Defaults to false.
Returns
void
Examples
// Example: Save the modified image without using specific options.
const viewer = DsImageViewer.findControl("#root");
viewer.save();
// Example: Save the modified image as "image.png".
const viewer = DsImageViewer.findControl("#root");
viewer.save({ fileName: "image.png" });
// 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: Save the modified image in PNG format.
const viewer = DsImageViewer.findControl("#root");
viewer.save({ convertToFormat: "image/png" });
// 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" });
setCursor()
setCursor(cursorType): IImageViewer;
Sets the cursor style for the image viewer
Parameters
cursorType
The cursor style to apply
Returns
IImageViewer
Examples
// Set rotate cursor during image rotation
viewer.setCursor('rotate');
// Set resize cursor when hovering over edges
viewer.setCursor('nwse-resize');
See
GlobalCursorType for all available cursor options
setImageDataUrl()
setImageDataUrl(dataUrl): Promise<void>;
Modify current image data url.
Parameters
dataUrl
any
Returns
Promise<void>
showActivitySpinner()
showActivitySpinner(container?): any;
Show activity spinner.
Parameters
container?
HTMLElement
Returns
any
Example
viewer.showActivitySpinner();
showPanel()
showPanel(panelKey, visible?): void;
Updates the panel visibility.
Parameters
panelKey
PanelHandle
visible?
boolean
Returns
void
showSecondToolbar()
showSecondToolbar(toolbarKey): Promise<void>;
Show a second toolbar specified by the toolbarKey argument.
Parameters
toolbarKey
Returns
Promise<void>
Example
// Show page tools bar.
viewer.showSecondToolbar("page-tools");
toggleCursor()
toggleCursor(cursorType): IImageViewer;
Toggles between specified cursor and default style
Parameters
cursorType
Cursor style to apply, or false to reset
false | GlobalCursorType
Returns
IImageViewer
Examples
// Toggle grab cursor during drag operations
viewer.toggleCursor(isDragging ? 'grab' : false);
// Toggle zoom cursor based on modifier key
document.addEventListener('keydown', (e) => {
if (e.ctrlKey) {
viewer.toggleCursor('zoom-in');
}
});
toggleFullscreen()
toggleFullscreen(fullscreen?): void;
Toggle full screen mode.
Parameters
fullscreen?
boolean
Returns
void
toggleToolbar()
toggleToolbar(show?): void;
Toggle toolbar visibility.
Parameters
show?
boolean
Returns
void
updatePanel()
updatePanel(panelKey, settings): void;
Updates panel settings such as visibility, label or "enabled" status.
Parameters
panelKey
PanelHandle
settings
PanelSettings
Returns
void