Cropper Events

Cropper events are used internally to connect the vviinn-cropper and vviinn-results components. They can also be used externally to handle crop operations manually (e.g., with auto-search="false" for custom API integration).

All these events are available on the vviinn-cropper component, and the following props are available for each event:

• imageBounds — Image dimensions in pixels

Some events have additional props, summarized in the table below.

Name	Description	Props
vviinnCropperLoadImage	Triggered when the image loads in the cropper.	–
vviinnCropperCropEnd	Triggered when crop ends, with enriched data including normalized coordinates for the visual-search API.	searchArea — Search area in absolute pixels normalizedSearchArea — Normalized search area (0–1 range) ready for the visual-search API requestId — Optional search/request ID for API continuity

Examples

By default, the cropper automatically triggers visual search after crop ends. Set auto-search="false" on the vviinn-cropper component to disable automatic search and handle the API call manually. The vviinnCropperCropEnd event will still fire with normalized data ready for API use.

document.addEventListener("vviinnCropperCropEnd", ({ detail }) => {
  console.log(detail);

  // Use normalizedSearchArea directly in visual-search API:
  // query: { searchArea: detail.normalizedSearchArea }
});

// Output:
{
  "searchArea": { "left": 100, "top": 50, "width": 200, "height": 150 },
  "normalizedSearchArea": { "left": 0.125, "top": 0.083, "width": 0.25, "height": 0.25 },
  "imageBounds": { "left": 0, "top": 0, "width": 800, "height": 600 },
  "requestId": "abc-123-def" // Optional: only present if search session exists
}