Class: TagComponent
component.TagComponent
classdesc Component for showing and editing tags with different
geometries composed from 2D basic image coordinates (see the
Viewer class documentation for more information about coordinate
systems).
The add method is used for adding new tags or replacing
tags already in the set. Tags are removed by id.
If a tag already in the set has the same id as one of the tags added, the old tag will be removed and the added tag will take its place.
The tag component mode can be set to either be non interactive or to be in creating mode of a certain geometry type.
The tag properties can be updated at any time and the change will be visibile immediately.
Tags are only relevant to a single image because they are based on 2D basic image coordinates. Tags related to a certain image should be removed when the viewer is moved to another image.
To retrive and use the tag component
example
var viewer = new Viewer({ component: { tag: true } }, ...);
var tagComponent = viewer.getComponent("tag");Hierarchy#
↳
TagComponent
Events#
on#
• on(type, handler): void
Event fired when a geometry has been created.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('geometrycreated', function() { console.log("A geometrycreated event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "geometrycreate" |
handler | (event: ComponentGeometryEvent) => void |
Returns#
void
Overrides#
Defined in#
component/tag/TagComponent.ts:571
• on(type, handler): void
Event fired when an interaction to create a geometry ends.
description A create interaction can by a geometry being created
or by the creation being aborted.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('tagcreateend', function() { console.log("A tagcreateend event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "tagcreateend" |
handler | (event: ComponentStateEvent) => void |
Returns#
void
Defined in#
component/tag/TagComponent.ts:593
• on(type, handler): void
Event fired when an interaction to create a geometry starts.
description A create interaction starts when the first vertex
is created in the geometry.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('tagcreatestart', function() { console.log("A tagcreatestart event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "tagcreatestart" |
handler | (event: ComponentStateEvent) => void |
Returns#
void
Defined in#
component/tag/TagComponent.ts:615
• on(type, handler): void
Event fired when the create mode is changed.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('tagmode', function() { console.log("A tagmode event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "tagmode" |
handler | (event: ComponentTagModeEvent) => void |
Returns#
void
Defined in#
component/tag/TagComponent.ts:634
• on(type, handler): void
Event fired when the tags collection has changed.
example
// Initialize the viewervar viewer = new Viewer({ // viewer options });var component = viewer.getComponent('<component-name>');// Set an event listenercomponent.on('tags', function() { console.log("A tags event has occurred.");});Parameters#
| Name | Type |
|---|---|
type | "tags" |
handler | (event: ComponentStateEvent) => void |
Returns#
void
Defined in#
component/tag/TagComponent.ts:653
Properties#
componentName#
â–ª Static componentName: ComponentName = "tag"
inheritdoc
Overrides#
Defined in#
component/tag/TagComponent.ts:98
Accessors#
activated#
• get activated(): boolean
Get activated.
Returns#
boolean
Value indicating if the component is currently active.
Defined in#
defaultConfiguration#
• get defaultConfiguration(): TConfiguration
Get default configuration.
Returns#
TConfiguration
Default configuration for component.
Defined in#
name#
• get name(): string
Get name.
description The name of the component. Used when interacting with the
component through the Viewer's API.
Returns#
string
Defined in#
Methods#
add#
â–¸ add(tags): void
Add tags to the tag set or replace tags in the tag set.
description If a tag already in the set has the same
id as one of the tags added, the old tag will be removed
the added tag will take its place.
example
tagComponent.add([tag1, tag2]);Parameters#
| Name | Type | Description |
|---|---|---|
tags | Tag[] | Tags to add. |
Returns#
void
Defined in#
component/tag/TagComponent.ts:289
calculateRect#
â–¸ calculateRect(geometry): Promise<number[]>
Calculate the smallest rectangle containing all the points in the points geometry.
description The result may be different depending on if the
current image is an spherical or not. If the
current image is an spherical the rectangle may
wrap the horizontal border of the image.
Parameters#
| Name | Type |
|---|---|
geometry | PointsGeometry |
Returns#
Promise<number[]>
Promise to the rectangle on the format specified for the RectGeometry in basic coordinates.
Defined in#
component/tag/TagComponent.ts:323
changeMode#
â–¸ changeMode(mode): void
Change the current tag mode.
description Change the tag mode to one of the create modes for creating new geometries.
fires tagmode
example
tagComponent.changeMode(TagMode.CreateRect);Parameters#
| Name | Type | Description |
|---|---|---|
mode | TagMode | New tag mode. |
Returns#
void
Defined in#
component/tag/TagComponent.ts:398
configure#
â–¸ configure(configuration): void
Configure the component.
Parameters#
| Name | Type | Description |
|---|---|---|
configuration | TagConfiguration | Component configuration. |
Returns#
void
Inherited from#
Defined in#
create#
â–¸ create(): void
Force the creation of a geometry programatically using its current vertices.
description The method only has an effect when the tag
mode is either of the following modes:
TagMode.CreatePoints TagMode.CreatePolygon TagMode.CreateRect TagMode.CreateRectDrag
In the case of points or polygon creation, only the created vertices are used, i.e. the mouse position is disregarded.
In the case of rectangle creation the position of the mouse at the time of the method call is used as one of the vertices defining the rectangle.
fires geometrycreate
example
tagComponent.on("geometrycreate", function(geometry) { console.log(geometry);});
tagComponent.create();Returns#
void
Defined in#
component/tag/TagComponent.ts:371
fire#
â–¸ fire(type, event): void
Parameters#
| Name | Type |
|---|---|
type | "geometrycreate" |
event | ComponentGeometryEvent |
Returns#
void
Overrides#
Defined in#
../doc/component/tag/TagComponent.ts:402
â–¸ fire(type, event): void
Parameters#
| Name | Type |
|---|---|
type | "tagmode" |
event | ComponentTagModeEvent |
Returns#
void
Overrides#
Component.fire
Defined in#
../doc/component/tag/TagComponent.ts:406
get#
â–¸ get(tagId): Tag
Returns the tag in the tag set with the specified id, or undefined if the id matches no tag.
example
var tag = tagComponent.get("tagId");Parameters#
| Name | Type | Description |
|---|---|---|
tagId | string | Id of the tag. |
Returns#
Defined in#
component/tag/TagComponent.ts:436
getAll#
â–¸ getAll(): Tag[]
Returns an array of all tags.
example
var tags = tagComponent.getAll();Returns#
Tag[]
Defined in#
component/tag/TagComponent.ts:453
getTagIdsAt#
â–¸ getTagIdsAt(pixelPoint): Promise<string[]>
Returns an array of tag ids for tags that contain the specified point.
description The pixel point must lie inside the polygon or rectangle
of an added tag for the tag id to be returned. Tag ids for
tags that do not have a fill will also be returned if the point is inside
the geometry of the tag. Tags with point geometries can not be retrieved.
No tag ids will be returned for polygons rendered in cropped spherical or rectangles rendered in spherical.
Notice that the pixelPoint argument requires x, y coordinates from pixel space.
With this function, you can use the coordinates provided by mouse events to get information out of the tag component.
If no tag at exist the pixel point, an empty array will be returned.
example
tagComponent.getTagIdsAt([100, 100]) .then((tagIds) => { console.log(tagIds); });Parameters#
| Name | Type | Description |
|---|---|---|
pixelPoint | number[] | Pixel coordinates on the viewer element. |
Returns#
Promise<string[]>
Promise to the ids of the tags that contain the specified pixel point.
Defined in#
component/tag/TagComponent.ts:494
has#
â–¸ has(tagId): boolean
Check if a tag exist in the tag set.
example
var tagExists = tagComponent.has("tagId");Parameters#
| Name | Type | Description |
|---|---|---|
tagId | string | Id of the tag. |
Returns#
boolean
Defined in#
component/tag/TagComponent.ts:530
off#
â–¸ off(type, handler): void
Unsubscribe from an event by its name.
Parameters#
| Name | Type |
|---|---|
type | "geometrycreate" |
handler | (event: ComponentGeometryEvent) => void |
Returns#
void
Overrides#
Defined in#
component/tag/TagComponent.ts:534
â–¸ off(type, handler): void
Parameters#
| Name | Type |
|---|---|
type | "tagmode" |
handler | (event: ComponentTagModeEvent) => void |
Returns#
void
Overrides#
Component.off
Defined in#
component/tag/TagComponent.ts:538
â–¸ off(type, handler): void
Parameters#
| Name | Type |
|---|---|
type | "tagcreateend" | "tagcreatestart" | "tags" |
handler | (event: ComponentStateEvent) => void |
Returns#
void
Overrides#
Component.off
Defined in#
component/tag/TagComponent.ts:542
remove#
â–¸ remove(tagIds): void
Remove tags with the specified ids from the tag set.
example
tagComponent.remove(["id-1", "id-2"]);Parameters#
| Name | Type | Description |
|---|---|---|
tagIds | string[] | Ids for tags to remove. |
Returns#
void
Defined in#
component/tag/TagComponent.ts:674
removeAll#
â–¸ removeAll(): void
Remove all tags from the tag set.
example
tagComponent.removeAll();Returns#
void