Custom Highlights

window.onload = function () {
    //DsPdfViewer.LicenseKey = "***key***";
    var viewer = new DsPdfViewer('#viewer', { restoreViewStateOnLoad: false });
    viewer.addDefaultPanels();
    var pdf = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf";
    viewer.open(pdf).then(async function () {

        // Highlight text segments on a specific page:

        // Highlight the word "Introduction" in the title at the start of the document:
        await viewer.highlightTextSegment(0, 0, 12, {
            color: 'rgba(255, 255, 0, 0.3)', // Semi-transparent yellow fill
            borderColor: 'rgba(255, 165, 0, 0.6)', // Semi-transparent orange border
            borderWidth: 1
        });

        // Highlight the word "Wetlands" in the title with custom colors and no border:
        await viewer.highlightTextSegment(0, 30, 38, {
            color: 'rgba(0, 255, 0, 0.3)', // Semi-transparent green fill
            borderWidth: 0 // No border
        });

        // Access the highlight manager to create custom highlights:
        const highlightManager = viewer.highlightManager;

		// Define custom highlights using specific rectangle coordinates on a PDF page
		const customHighlights = {
			// Page reference notes:
			// - PDF page dimensions are 612pt wide and 792pt tall.
			// - The origin (0, 0) is at the bottom-left corner of the page.
			// - X-coordinates increase to the right.
			// - Y-coordinates increase upwards.

			// The array 'rects' specifies areas to highlight on the page using rectangles.
			// Rectangles can be defined in two formats:
			// 1. Using two points to represent the bottom-left and top-right corners: [x1, y1, x2, y2].
			// 2. Using the position (x, y) of the bottom-left corner and specifying width (w) and height (h): {x, y, w, h}.
			rects: [
				[226, 682, 318, 694],              // Rectangle for the text "The Importance".
												   // Defined using corner coordinates: [bottom-left x, bottom-left y, top-right x, top-right y].
												   // Width is the difference between x2 and x1, height is the difference between y2 and y1.

				{ x: 242, y: 581, w: 137, h: 18 }, // Rectangle for the text "two point three (2.3) million".
												   // Defined using bottom-left corner position (x, y) and dimensions (w, h).
												   // 'x' is 242 points from the left edge, 'y' is 599 points above the bottom edge.
												   // Width 'w' extends 137 points to the right, height 'h' extends 18 points upwards.

				{ x: 220, y: 563, w: 100, h: 16 }  // Rectangle for the text "twelve percent (12%)".
												   // Similarly defined with bottom-left corner (x, y) at 220 points from the left and 579 points up from the bottom.
												   // Extends 100 points to the right and 16 points up.

			],
			
			// Highlight styling options:
			color: 'rgba(255, 0, 0, 0.2)',       // Fill color for highlights: semi-transparent red.
												 // The RGBA format (Red, Green, Blue, Alpha) specifies color and transparency, with alpha (0.2) controlling the transparency level.
			
			borderColor: 'rgba(0, 0, 255, 0.6)', // Border color for highlights: semi-transparent blue.
												 // Also uses RGBA format with alpha (0.6) for semi-transparency.

			borderWidth: 1                       // Border thickness: 1pt.
												 // Specifies a thin border around each highlighted rectangle.
		};



        // Add custom highlights to page 1:
        highlightManager.addHighlight(0, customHighlights);

        // Highlighting important terms across multiple pages:

        // Highlight "wildlife species" on page 1:
        await viewer.highlightTextSegment(0, 300, 307, {
            color: 'rgba(173, 216, 230, 0.4)', // Light blue fill
            borderColor: 'rgba(0, 0, 139, 0.7)', // Dark blue border
            borderWidth: 2
        });

        // Highlight "oxygen" on page 2
        viewer.highlightTextSegment(1, 23, 29, {
            color: 'rgba(255, 99, 71, 0.4)', // Tomato fill
            borderColor: 'rgba(139, 0, 0, 0.7)', // Dark red border
            borderWidth: 2
        });

		// Adding a custom highlight with a custom paint handler (optional):
		// Notes on coordinate system and page dimensions:
		// - PDF page dimensions: width = 612pt, height = 792pt.
		// - The origin (0, 0) is located at the bottom-left corner of the page.

		const customHighlight = {
			pageIndex: 0,  // Specifies the page number where the highlight should be applied (0-based index).
			rects: [{ x: 500, y: 780, w: 100, h: 100 }], // Defines a rectangle at the top-right corner of the page.
														 // Coordinates are based on PDF's coordinate system:
														 // - 'x' is 500pt from the left edge.
														 // - 'y' is 780pt up from the bottom edge.
														 // - 'w' (width) extends 100pt to the right.
														 // - 'h' (height) extends 100pt upwards.

			// The 'paintHandler' function provides custom rendering logic for highlights.
			paintHandler: (ctx, highlight) => {
				
				// Note: The PDF coordinate system starts with the origin at the bottom-left corner.
				// However, canvas drawing operations typically use a coordinate system with the origin at the top-left corner.
				// Therefore, coordinates must be converted when drawing on a canvas:
				// - You need to flip the Y-axis and adjust for any zoom applied to the PDF page.
				// The 'applyViewPortScale' method handles this conversion automatically, translating
				// the PDF coordinates into the canvas coordinate space based on the current zoom level of the page.
				
				const scaledRect = viewer.applyViewPortScale(highlight.rects[0], highlight.pageIndex); // Convert PDF coordinates to canvas coordinates.
				const { x, y, w, h } = scaledRect; // Destructure the converted coordinates for use in canvas drawing.

                // Set up styles
                ctx.strokeStyle = highlight.borderColor || 'rgba(255, 165, 0, 0.8)'; // Orange border
                ctx.lineWidth = highlight.borderWidth || 3;
                ctx.fillStyle = highlight.color || 'rgba(255, 215, 0, 0.5)'; // Gold fill

                // Draw an ellipse (for signature-like shape):
                ctx.beginPath();
                ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, 2 * Math.PI);
                ctx.fill();
                ctx.stroke();

                // Draw a star inside the ellipse:
                const centerX = x + w / 2;
                const centerY = y + h / 2;
                const outerRadius = w / 4;
                const innerRadius = outerRadius / 2;
                const points = 5;

                ctx.beginPath();
                for (let i = 0; i < points; i++) {
                    const angle = (Math.PI / points) * i * 2;
                    const xOuter = centerX + Math.cos(angle) * outerRadius;
                    const yOuter = centerY - Math.sin(angle) * outerRadius;
                    ctx.lineTo(xOuter, yOuter);

                    const xInner = centerX + Math.cos(angle + Math.PI / points) * innerRadius;
                    const yInner = centerY - Math.sin(angle + Math.PI / points) * innerRadius;
                    ctx.lineTo(xInner, yInner);
                }
                ctx.closePath();
                ctx.fillStyle = 'rgba(255, 69, 0, 0.7)'; // Red-Orange for the star
                ctx.fill();
                ctx.strokeStyle = 'rgba(255, 99, 71, 0.9)'; // Tomato color for the star border
                ctx.stroke();
            }
        };

        // Add the custom highlight with the custom paint handler to the first page:
        highlightManager.addHighlight(customHighlight.pageIndex, customHighlight);

        // Manually repaint the text layer to apply custom highlights (if not already done)
        //highlightManager.repaintTextLayer();

        // Clear highlights on the first page
        //viewer.clearHighlightedSegments([0]);
    });
}