HOW TO: Add Copy/Paste Functionality to the HTML5 Document Viewer Demo

#1 Posted : Wednesday, September 5, 2018 1:26:52 PM(UTC)

Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

Was thanked: 28 time(s) in 28 post(s)

Project Source:
The source for our HTML5 Document Viewer Demo can be found in the following location:
LEADTOOLS 20\Examples\JS\Documents\DocumentViewer\Clients\Apps\App1

Alternatively, if you don't have the full SDK installed, you can download the source based on our NuGet packages:
https://www.leadtools.com/downloads/evaluation-form?download=/rd/v200/demo-source/document_viewer_html5.zip

The Code:
Our Document Viewer uses a DIV element as the event source for things like pressing the delete key in order to remove an annotation. We'll be adding event handlers for the copy and paste events on that DIV. Since these events aren't supported for all browsers (specifically Internet Explorer), we will fall back to the usual keydown event. Rather than attempting to store an object in the clipboard, we will be using the AnnCodecs class for serializing to/from the clipboard.

Main.ts around line 1140: (you can follow similar steps in the Main.js file if you aren't building from TypeScript)
Locate the following:

Code:

$parentDiv.on("keydown", (e: JQueryEventObject) => {
    this._annotationsPart.interactiveService_keyDown(e);
});

Modify it to be the following:

Code:

$parentDiv.on("keydown", (e: JQueryEventObject) => {
    this._annotationsPart.interactiveService_keyDown(e);
    if (lt.LTHelper.browser == lt.LTBrowser.internetExplorer)
        if (e.ctrlKey || e.metaKey)
            switch (e.key) {
                case "c":
                    this._annotationsPart.interactiveService_copy(e);
                    break;
                case "v":
                    this._annotationsPart.interactiveService_paste(e);
                    break;
            }
});

Then add the following just below:

Code:

$parentDiv.on("copy", (e: JQueryEventObject) => {
    this._annotationsPart.interactiveService_copy(e);
});
$parentDiv.on("paste", (e: JQueryEventObject) => {
    this._annotationsPart.interactiveService_paste(e);
});

Main.Annotations.ts around line 360:
Locate the following:

Code:

public interactiveService_keyDown(e: JQueryEventObject) {
    // Delete the selected annotations object, if delete key was pressed
    if (e.keyCode == 46) {
        var automation = this._mainApp.documentViewer.annotations.automation;
        if (automation.canDeleteObjects) {
            automation.deleteSelectedObjects();
            this.removeAutomationTextArea(false);
        }
    }
}

Then add the following just below:

Code:

public interactiveService_copy(e: JQueryEventObject) {
	// Get the clipboard data
	var ie = lt.LTHelper.browser == lt.LTBrowser.internetExplorer;
	var clipboard: DataTransfer;
	if (ie)
		clipboard = <DataTransfer>((<any>window).clipboardData);
	else
		clipboard = (<ClipboardEvent>e.originalEvent).clipboardData;

	// Get the current selected annotation(s)
	var automation = this._mainApp.documentViewer.annotations.automation;
	var selection = automation.activeContainer.selectionObject.selectedObjects;

	// Ensure one annotation was selected
	if (selection.count != 1)
		return;

	// Clear the clipboard
	clipboard.clearData();
	e.preventDefault();

	// Get the annotation
	var ann = selection.item(0);

	// Generate an XML string for the annotation
	var container = new lt.Annotations.Engine.AnnContainer();
	container.children.add(ann.clone());
	var xml: string = new lt.Annotations.Engine.AnnCodecs().save(
		container, lt.Annotations.Engine.AnnFormat.annotations, null, 1
	);

	// Save the string to the clipboard
	clipboard.setData(ie ? "text" : "text/annotation", xml);
}

public interactiveService_paste(e: JQueryEventObject) {
	// Get the clipboard data
	var ie = lt.LTHelper.browser == lt.LTBrowser.internetExplorer;
	var clipboard: DataTransfer;
	if (ie)
		clipboard = <DataTransfer>((<any>window).clipboardData);
	else
		clipboard = (<ClipboardEvent>e.originalEvent).clipboardData;
	e.preventDefault();

	// Ensure the annotation was copied previously
	if (!ie && clipboard.types.indexOf("text/annotation") < 0)
		return;

	// Read the annotation(s) from the clipboard
	var xml = clipboard.getData(ie ? "text" : "text/annotation");
	if (!xml)
		return;
	var container = new lt.Annotations.Engine.AnnCodecs().load(xml, 1);

	// Ensure one annotation was pasted
	if (!container || container.children.count != 1)
		return;

	// Get the annotation
	var ann = container.children.item(0);

	// Optional: Move the annotation to the center of the page
	var automation = this._mainApp.documentViewer.annotations.automation;
	var container = automation.activeContainer;
	var offset = lt.LeadPointD.create(
		(container.size.width - ann.bounds.width) / 2 - ann.bounds.x,
		(container.size.height - ann.bounds.height) / 2 - ann.bounds.y
	);
	ann.translate(offset.x, offset.y);

	// Add it to the container
	container.children.add(ann);

	// Select the new annotation
	automation.selectObject(ann);

	// Refresh
	this._mainApp.documentViewer.thumbnails.invalidate(lt.LeadRectD.empty);
	this._mainApp.documentViewer.view.invalidate(lt.LeadRectD.empty);
}

Additional Remarks:
The code I have provided above is designed for copying and pasting individual annotations. The method can of course be extended to support multiple annotations, or even groups.
The only thing you'll need to be careful of is when copying/pasting groups, be sure to change the groupName property so they aren't grouped with the original annotations. You'll also want to ensure the groupName is modified similarly for all pasted annotations so the internal groupings are still valid.

Edited by user Thursday, September 13, 2018 10:23:27 AM(UTC) | Reason: Added support for Internet Explorer

Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.

Notification

HOW TO: Add Copy/Paste Functionality to the HTML5 Document Viewer Demo