Skip to content

Selection Area

Allows to draw a selection area on the map and provides the necessary triggers to manage the nodes inside this area.

  • Plugin name: "selection_area"
  • Plugin namespace: "selection_area"

Loading the plugin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { loadModule } from "@3ddv/dvm";

var input_options = {
    container: "container-id",
    plugins: ["selection_area"]
};

loadModule("map_viewer", input_options)
    .then(function(viewer) {
        start(viewer);
    })
    .catch(function(err) {
        console.error(err);
    });

function start(viewer) {
    // ...
}

If this plugin is loaded, the module will have the following additional features:

If you press ctrl and drag with the mouse, a selection area will be created. The following new events will be triggered:

  • start_selection_area: triggered the first time a selection area is created.
  • update_selection_area: triggered every time a selection area changes its size.
  • end_selection_area: triggered when the selection area is removed (when the mouse is released).

Each of these triggers will have an event object with an additional property, selection_area, with the following propierties:

  • current: List of nodes inside the selection area.
  • previous: List of nodes that were inside the selection area in the previous event.
  • added: List of nodes that have been added from previous to current.
  • subtracted: List of nodes that have been subtracted from previous to current.

Properties

enable

Enables/disables the selection area. Enabled by default.

1
2
// disable selection area interactions
viewer.selecion_area.enabled = false;

mouse_options

Allows to change the behavior of the mouse with the following properties:

  • button: allows to change the valid button of the mouse to create and maintain the selection area. Same values as button property of a mouse event.
  • altKey: true if alt key is required to be pressed to create the selection area. Same values as altKey property of a mouse event.
  • ctrlKey: true if ctrl key is required to be pressed to create the selection area. Same values as ctrlKey property of a mouse event.
  • metaKey: true if meta key is required to be pressed to create the selection area. Same values as metaKey property of a mouse event.
  • shiftKey: true if shift key is required to be pressed to create the selection area. Same values as shiftKey property of a mouse event.

Info

Modifier keys are required to start the selection area. Once created you can release the modifier keys. Only the mouse ends the selection area.

1
2
3
4
5
6
7
8
// right click button required
viewer.selection_area.mouse_options.button = 2;

// alt+ctrl keys required
viewer.selection_area.mouse_options.altKey = true;
viewer.selection_area.mouse_options.ctrlKey = true;
viewer.selection_area.mouse_options.metaKey = false;
viewer.selection_area.mouse_options.shfitKey = false;

mouse_options

Allows to change the styles of the selection area. The selection area is composed by 2 borders.

  • border_color1: Border color 1. Accepts a css color as string."darkgray" by default.
  • border_color2: Border color 1. Accepts a css color as string. "white" by default.
  • border_width1: Border 1 width. Must be greater than 0. 2 by default.
  • border_width2: Border 2 width. Must be greater than 0. 3 by default.
  • fill_color: fill color of the selection area. "rgba(255, 255, 255, 0.3)" by default.
1
2
3
4
5
6
// border 1: red
viewer.selection_area.style_options.border_color1 = "#FF0000";
// Border width 2: 8px
viewer.selection_area.style_options.border_width2 = 8;
// no fill
viewer.selection_area.style_options.fill_color = "rgba(0, 0, 0, 0)";

Example

  1. Zoom until you can see the seats.
  2. Press ctrl and drag with the left mouse click.
  3. Press ctrl + shift and drag with the left mouse click to maintain previous selection.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { loadModule } from "@3ddv/dvm";

var input_options = {
    container: "viewer-container",
    plugins: ["selection_area"]
};

loadModule("map_viewer", input_options)
    .then(function(viewer) {
        start(viewer);
    })
    .catch(function(err) {
        console.error(err);
    });

function start(viewer) {
    viewer.flags.automatic_selection = false;
    viewer.max_selection = Infinity;

    viewer.subscribe("start_selection_area", function(obj) {
        // Reset all selected nodes and select the current nodes of the selection area
        obj.instance.max_selection = Infinity;
        if (!obj.original_event.shiftKey) {
            obj.instance.unselectAll();
        }
        obj.instance.select(obj.selection_area.current);
    });

    viewer.subscribe("update_selection_area", function(obj) {
        if (obj.selection_area) {
            // unselect subtracted nodes from the selection area
            obj.instance.unselect(obj.selection_area.subtracted);
            // select added nodes from the selection area
            obj.instance.select(obj.selection_area.added);
        }
    });

    viewer.subscribe("end_selection_area", function(obj) {
        if (obj.selection_area) {
            // unselect subtracted nodes from the selection area
            obj.instance.unselect(obj.selection_area.subtracted);
            // select added nodes from the selection area
            obj.instance.select(obj.selection_area.added);
        }
    });

    viewer.loadMap({ venue_id: "eu-es-00008-default" })
        .then(function(obj) {
            // Successfully loaded
            obj.instance.setAvailability("section", viewer.getNodesByType("section"));
            obj.instance.setAvailability("seat", viewer.getNodesByType("seat"));
        })
        .catch(function(err) {
            // Error while loading
            console.error(err);
        });
}