Actively toggle the selection state within OpenSeadragon

Currently, I am in the process of integrating a viewer for scanned pages using OpenSeadragon along with the Selection plugin (https://github.com/picturae/openseadragonselection) to allow users to select a portion of the page.

I have successfully incorporated custom controls for zooming in/out and switching between selection mode and image zoom. Things are going smoothly so far.

However, I am facing challenges when it comes to dynamically changing the selection state in my code.

During the initialization of my viewer, the code looks something like this:

var options = {
    showNavigator: true,
    toggleButton: 'toggle-selection',
    zoomPerClick: 2.0,
    element: 'myElement',
    url: <url to image>
};

var viewer = OpenSeadragon(options);

The viewer initializes as expected and all seems to be working fine. By clicking on the element with id="toggle-selection", I can easily enable or disable the selection mode.

My goal is to connect an Angular ng-click handler to a certain element that will toggle the selection mode of my viewer. However, I am struggling to figure out how to update the option and ensure that the viewer reflects the new state.

javascriptangularjsopenseadragon

Answer №1

To start using the selection plugin, follow these steps:

var selectOption = viewer.selection(options);

Once initialized, you have the ability to modify the selection status with any of the following commands:

selectOption.enable();
selectOption.disable();
selectOption.toggleState();

If you are unable to save the selection object for future use, you can retrieve it from the viewer without passing options like so:

var selectOption = viewer.selection();

It is important to ensure that the selection has been activated prior to this step to avoid creating multiple instances and encountering issues.

You can also verify if the selection is active by checking the boolean property selectOption.isSelecting

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A Vue component library devoid of bundled dependencies or the need for compiling SCSS files

My current challenge involves the task of finding a way to publish our team's component library. These components are intended to be used by various internal applications within our organization. I have specific requirements: The library must be acc ...

javascripttypescriptvue.jsnpmvue-component

Verify whether the element in the DOM is a checkbox

What is the method to determine whether a specific DOM element is a checkbox? Situation: In a collection of dynamically assigned textboxes and checkboxes, I am unable to differentiate between them based on their type. ...

javascriptjquerydom

Encountering difficulties while trying to install ng2-material in Angular 2

I'm attempting to utilize a data table with the ng2-material library from ng2-material as shown below: <md-data-table [selectable]="true"> <thead> <tr md-data-table-header-selectable-row> <th class="md-text-cell">M ...

javascriptangularnpmnpm-install

Using JQuery to pass a concatenated variable

What is the reason behind the success of this code: $(".ab").css({'background':'#ce0000','color':'#EEE'}); While this code does not work: f("ab"); function f(ab){ var x = '".'+ ab +'"'; ...

javascriptjquery

Setting a cookie in a browser using an AJAX response: A step-by-step guide

When utilizing a Javascript function with jQuery to send a POST request to a web service, the response from the web server includes a header "Set-Cookie: name=value; domain=api.mydomain.com; path=/", along with a JSON body. However, despite this expected ...

javascriptjqueryajaxcookies

Navigating through sections in NextJS-14: Utilizing useRef for seamless scrolling

In the past, I had developed an older portfolio website using Vite React + TS and implemented useRef for scrolling to sections from the Navbar. Now, my goal is to transition this portfolio to NextJS 14. I transferred my old components and style folders in ...

javascriptreactjstypescriptnext.jsvite

What is the best way to use async await to listen for an event in a child component with Vue-router?

To prevent users from unintentionally leaving an unsaved form, I am looking to implement a custom modal alert system with vue-router. Although the use of the standard browser alert box is an option, beforeRouteLeave (to, from, next) { const answer = wi ...

javascriptvue.jsasync-awaitvue-router

NodeJS threw an error: The call stack size has exceeded the maximum limit

My tool of choice is socket.io Error Encountered: We are facing a RangeError while calling `socket.disconnect()`; Please help resolve this issue. Thank you! ...

javascriptnode.jssocket.io

JavaScript: Organize an array of objects into separate sections based on a specific field

Presented below is a set of data: const dataSet = [ { id: '1', name: 'River', address: 'Terminal A', type: 'OTHER', code: null, targetArrivalStep: 30, disabled: true, }, { id: &a ...

javascript

Ways to update vuex state using mutations

Currently, I am facing an issue while working on an app where I'm attempting to change the Vuex state using mutations but it's not functioning as expected. Initially, the state.status is set as an empty string, and my goal is to update it to the ...

javascriptvue.jsaxiosvuex

Having issues with reading files in PHP using AJAX? Explore alternative methods for downloading files seamlessly

I need to store a value in a txt file and allow the user to download it. Currently, the value is successfully written to the txt file, but the readfile function does not execute, preventing the download from starting. The PHP code is on the same page as ...

javascriptphpjqueryajax

Persistent Angular Factory Variables Showing Outdated Data - Instances Stuck with Old Values

One of the challenges I faced was setting up a resource factory to build objects for accessing our API. The base part of the URL needed to be determined using an environment variable, which would include 'account/id' path segments when the admin ...

javascriptangularjs

simulated xhr server along with the locales in polymer appLocalizeBehavior

Currently, I am in the process of developing a web frontend utilizing Polymer. Within my web component, I incorporate various other components such as paper-input or custom web components. To facilitate testing for demonstration purposes, I have integrated ...

javascriptjsonpolymersinoniron-ajax

Gather information on a webpage

I am attempting to extract a table from the following page "https://www.hkex.com.hk/Mutual-Market/Stock-Connect/Statistics/Historical-Monthly?sc_lang=en#select1=0&select2=0". After using the inspect/network function in Chrome, it appears that the data ...

javascriptpythonjsonpandasweb-scraping

Display a featherlightbox popup when the page loads

Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...

javascriptphpjqueryhtmlwordpress

Issue with Mobile Touch Screen Preventing Vertical Scrolling

Currently experiencing difficulties with a div element that is not allowing touch and vertical scroll on mobile devices. Although scrolling works fine with the mouse wheel or arrow keys, it does not respond to touch. Have tested this on various devices and ...

javascriptcssreactjssassstyled-components

Prevent premature termination of slow HTTP requests in Node.js/Express server

Having an issue with long duration http requests in my React/Nodejs application. Whenever a request takes more than 4 minutes to respond, it gets aborted before reaching the client. Could there be a timeout setting for requests or something else I am overl ...

javascriptnode.jsexpress

I love the idea of the music playing on as I navigate between pages or tabs. Such a cool feature with Next

I'm looking to implement a music player within my next.js application. How can I ensure that the currently playing track doesn't stop when switching between pages? Essentially, I want the music playback to continue seamlessly as users navigate th ...

javascriptreactjstypescriptnext.jsfrontend

Which style is more legible when conditionally rendering a multitude of components?

Imagine a scenario where there's a web application page with a data table that can be edited based on certain permissions. In this case, the editing capabilities are limited to selecting and deleting rows. Which approach do you find more clear for th ...

javascriptreactjs

Update the useState function individually for every object within an array

After clicking the MultipleComponent button, all logs in the function return null. However, when clicked a second time, it returns the previous values. Is there a way to retrieve the current status in each log within the map function? Concerning the useEf ...

javascriptreactjstypescript