Skip to content

Controlling selection behaviour #153

Open
@Aierie

Description

@Aierie

Hello! Wondering about controlling selection behaviour from userland.

I am making an app that has different behaviours on selection when different keys are pressed, and needs to be able to conditionally select a group of related annotations when one of them are clicked, and toggle selection state of a single annotation without interfering with other annotations. Initially, looking at the interface of clickAnnotation event here, I thought I would be able to retrieve whether modifier keys are pressed from the original event. However, it seems like clickAnnotation is not implemented for @recogito/text-annotator.

I then tried listening for DOM click events and checking whether they were on a range of an annotation:

document.querySelector('#annotator-target-example-6').addEventListener('click',(e) => {
	let range,textNode,offset;
	if (document.caretPositionFromPoint) {
		range = document.caretPositionFromPoint(
			e.clientX,
			e.clientY,
		);
		textNode = range.offsetNode;
		offset = range.offset;
	} else if (document.caretRangeFromPoint) {
		// Use WebKit-proprietary fallback method
		range = document.caretRangeFromPoint(e.clientX, e.clientY);
		textNode = range.startContainer;
		offset = range.startOffset;
	} else {
		throw new Error('document.caretPositionFromPoint and document.caretRangeFromPoint are not supported');
	}
	let annotations = annotator.getAnnotations();
	let annotationId = annotations.map((v) => [v.id, v.target.selector[0].range]).find(([k, r]) => { return r.isPointInRange(textNode, offset); })[0];
	if (!annotationId) return;
	if (e.altKey) {
		let selectedIds = new Set(annotator.getSelected().map((a) => a.id));
		if (selectedIds.has(annotationId)) {
			selectedIds.delete(annotationId);
		} else {
			selectedIds.add(annotationId);
		}
		annotator.setSelected(
			[...selectedIds]
		)
	} else {
		annotator.setSelected(
			[
				annotationId
			]
		)
	}
});

But it seems like internally, even with userSelectAction set to UserSelectAction.NONE, TextAnnotatorState is calling userSelect here:

selection.userSelect(hovered.id, evt);

Which in turn will either set the selected annotations to an empty array, or to a single one.

Is there any way around this? Would I need to maintain selection state in my own app or perhaps in an annotation's properties?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions