@vertexvis/viewer 0.15.2-testing.0 → 0.15.2-testing.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{config-4a86ae0b.js → config-6e330a82.js} +1 -1
- package/dist/cjs/{entities-496b61cd.js → entities-7b2e8c03.js} +2 -2
- package/dist/cjs/index.cjs.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{mapper-216603b0.js → mapper-0f2294a6.js} +1 -1
- package/dist/cjs/{scene-cb169b09.js → scene-56438693.js} +1 -25
- package/dist/cjs/{streamAttributes-7725f5c4.js → streamAttributes-c64aee75.js} +4 -976
- package/dist/cjs/vertex-scene-tree.cjs.entry.js +2 -2
- package/dist/cjs/vertex-viewer-dom-element_2.cjs.entry.js +1 -1
- package/dist/cjs/vertex-viewer-markup.cjs.entry.js +11 -1
- package/dist/cjs/vertex-viewer-measurement-details.cjs.entry.js +1 -1
- package/dist/cjs/vertex-viewer-measurement-distance.cjs.entry.js +2 -2
- package/dist/cjs/vertex-viewer-measurement-line_2.cjs.entry.js +2 -2
- package/dist/cjs/vertex-viewer-measurement-precise.cjs.entry.js +4 -4
- package/dist/cjs/vertex-viewer-pin-group.cjs.entry.js +2 -2
- package/dist/cjs/vertex-viewer-transform-widget.cjs.entry.js +1 -1
- package/dist/cjs/vertex-viewer-view-cube.cjs.entry.js +1 -1
- package/dist/cjs/vertex-viewer.cjs.entry.js +3 -3
- package/dist/cjs/viewer.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/viewer-markup/viewer-markup.js +36 -2
- package/dist/collection/lib/scenes/mapper.js +1 -11
- package/dist/collection/lib/scenes/queries.js +1 -15
- package/dist/custom-elements/index.d.ts +0 -6
- package/dist/custom-elements/index.js +16 -1169
- package/dist/esm/{config-6cdeb6ca.js → config-49688db8.js} +1 -1
- package/dist/esm/{entities-6f3c5437.js → entities-a5bfef48.js} +2 -2
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.mjs +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/loader.mjs +1 -1
- package/dist/esm/{mapper-941ff03c.js → mapper-5894c2a4.js} +1 -1
- package/dist/esm/{scene-6f98b0dd.js → scene-5b919078.js} +1 -25
- package/dist/esm/{streamAttributes-24bd7b3a.js → streamAttributes-7e8565be.js} +4 -976
- package/dist/esm/vertex-scene-tree.entry.js +2 -2
- package/dist/esm/vertex-viewer-dom-element_2.entry.js +1 -1
- package/dist/esm/vertex-viewer-markup.entry.js +11 -1
- package/dist/esm/vertex-viewer-measurement-details.entry.js +1 -1
- package/dist/esm/vertex-viewer-measurement-distance.entry.js +2 -2
- package/dist/esm/vertex-viewer-measurement-line_2.entry.js +2 -2
- package/dist/esm/vertex-viewer-measurement-precise.entry.js +4 -4
- package/dist/esm/vertex-viewer-pin-group.entry.js +2 -2
- package/dist/esm/vertex-viewer-transform-widget.entry.js +1 -1
- package/dist/esm/vertex-viewer-view-cube.entry.js +1 -1
- package/dist/esm/vertex-viewer.entry.js +3 -3
- package/dist/esm/viewer.js +1 -1
- package/dist/types/components/viewer-markup/viewer-markup.d.ts +6 -0
- package/dist/types/components.d.ts +7 -24
- package/dist/types/lib/scenes/queries.d.ts +2 -12
- package/dist/viewer/index.esm.js +1 -1
- package/dist/viewer/{p-cea5d8bd.js → p-1e0dd2e9.js} +1 -1
- package/dist/viewer/{p-52ab9ec0.js → p-1fc24ec6.js} +1 -1
- package/dist/viewer/{p-a5f18e7b.entry.js → p-22ae6785.entry.js} +1 -1
- package/dist/viewer/p-31b87b90.js +4 -0
- package/dist/viewer/{p-24cda14a.entry.js → p-3f6f2457.entry.js} +1 -1
- package/dist/viewer/{p-9e1384c9.js → p-40a9dd7d.js} +1 -1
- package/dist/viewer/{p-608925c5.entry.js → p-61e50e11.entry.js} +1 -1
- package/dist/viewer/{p-74c772bb.entry.js → p-7579e2a1.entry.js} +1 -1
- package/dist/viewer/{p-bfacbaa8.entry.js → p-920c9a88.entry.js} +1 -1
- package/dist/viewer/{p-597cc9b5.js → p-927b528b.js} +1 -1
- package/dist/viewer/{p-1bba9ade.entry.js → p-a6558bb2.entry.js} +1 -1
- package/dist/viewer/{p-2b58afc3.entry.js → p-b7e170ac.entry.js} +1 -1
- package/dist/viewer/{p-69a3fce8.entry.js → p-d34ad2b2.entry.js} +1 -1
- package/dist/viewer/{p-a107b65e.entry.js → p-d64c1e14.entry.js} +2 -2
- package/dist/viewer/p-e422deaf.entry.js +4 -0
- package/dist/viewer/{p-c72da0fb.entry.js → p-f3ea0c2b.entry.js} +1 -1
- package/dist/viewer/viewer.esm.js +1 -1
- package/package.json +8 -8
- package/dist/cjs/vertex-viewer-drag-select.cjs.entry.js +0 -177
- package/dist/collection/components/viewer-drag-select/controller.js +0 -18
- package/dist/collection/components/viewer-drag-select/interaction-handler.js +0 -41
- package/dist/collection/components/viewer-drag-select/model.js +0 -49
- package/dist/collection/components/viewer-drag-select/viewer-drag-select.css +0 -36
- package/dist/collection/components/viewer-drag-select/viewer-drag-select.js +0 -115
- package/dist/esm/vertex-viewer-drag-select.entry.js +0 -173
- package/dist/types/components/viewer-drag-select/controller.d.ts +0 -9
- package/dist/types/components/viewer-drag-select/interaction-handler.d.ts +0 -15
- package/dist/types/components/viewer-drag-select/model.d.ts +0 -25
- package/dist/types/components/viewer-drag-select/viewer-drag-select.d.ts +0 -27
- package/dist/viewer/p-68e192b9.js +0 -4
- package/dist/viewer/p-7762c40a.entry.js +0 -4
- package/dist/viewer/p-ae31d912.entry.js +0 -4
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
:host {
|
|
2
|
-
--viewer-drag-select-outline-exclusive-border-color: #5555ff;
|
|
3
|
-
--viewer-drag-select-outline-exclusive-border-style: solid;
|
|
4
|
-
--viewer-drag-select-outline-exclusive-fill-color: blue;
|
|
5
|
-
--viewer-drag-select-outline-inclusive-border-color: #ff5555;
|
|
6
|
-
--viewer-drag-select-outline-inclusive-border-style: dashed;
|
|
7
|
-
--viewer-drag-select-outline-inclusive-fill-color: red;
|
|
8
|
-
--viewer-drag-select-outline-fill-opacity: 0.1;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.outline {
|
|
12
|
-
position: absolute;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.outline.exclusive {
|
|
16
|
-
border: 3px var(--viewer-drag-select-outline-exclusive-border-style) var(--viewer-drag-select-outline-exclusive-border-color);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.outline.inclusive {
|
|
20
|
-
border: 3px var(--viewer-drag-select-outline-inclusive-border-style) var(--viewer-drag-select-outline-inclusive-border-color);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.fill {
|
|
24
|
-
position: relative;
|
|
25
|
-
width: 100%;
|
|
26
|
-
height: 100%;
|
|
27
|
-
opacity: var(--viewer-drag-select-outline-fill-opacity);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.fill.exclusive {
|
|
31
|
-
background-color: var(--viewer-drag-select-outline-exclusive-fill-color);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.fill.inclusive {
|
|
35
|
-
background-color: var(--viewer-drag-select-outline-inclusive-fill-color);
|
|
36
|
-
}
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import { ViewerDragSelectController } from './controller';
|
|
4
|
-
import { ViewerDragSelectInteractionHandler } from './interaction-handler';
|
|
5
|
-
import { ViewerDragSelectModel, } from './model';
|
|
6
|
-
export class ViewerDragSelect {
|
|
7
|
-
constructor() {
|
|
8
|
-
this.handleBoundsChanged = this.handleBoundsChanged.bind(this);
|
|
9
|
-
}
|
|
10
|
-
componentWillLoad() {
|
|
11
|
-
this.interactionModel = new ViewerDragSelectModel();
|
|
12
|
-
this.interactionModel.onBoundsChanged(this.handleBoundsChanged);
|
|
13
|
-
this.handleViewerChanged(this.viewer);
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* @ignore
|
|
17
|
-
*/
|
|
18
|
-
handleViewerChanged(newViewer) {
|
|
19
|
-
this.deregisterInteractionHandler();
|
|
20
|
-
if ((newViewer === null || newViewer === void 0 ? void 0 : newViewer.stream) != null) {
|
|
21
|
-
this.registerInteractionHandler(newViewer);
|
|
22
|
-
this.controller = new ViewerDragSelectController(newViewer, this.interactionModel);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* @ignore
|
|
27
|
-
*/
|
|
28
|
-
render() {
|
|
29
|
-
return (h(Host, null,
|
|
30
|
-
h("vertex-viewer-layer", null, this.dragRect != null && (h("div", { class: classNames('outline', {
|
|
31
|
-
exclusive: this.dragDirection === 'right',
|
|
32
|
-
inclusive: this.dragDirection === 'left',
|
|
33
|
-
}), style: {
|
|
34
|
-
left: `${this.dragRect.x}px`,
|
|
35
|
-
top: `${this.dragRect.y}px`,
|
|
36
|
-
width: `${this.dragRect.width}px`,
|
|
37
|
-
height: `${this.dragRect.height}px`,
|
|
38
|
-
} },
|
|
39
|
-
h("div", { class: classNames('fill', {
|
|
40
|
-
exclusive: this.dragDirection === 'right',
|
|
41
|
-
inclusive: this.dragDirection === 'left',
|
|
42
|
-
}) }))))));
|
|
43
|
-
}
|
|
44
|
-
handleBoundsChanged(event) {
|
|
45
|
-
this.dragRect = event.rectangle;
|
|
46
|
-
this.dragDirection = event.direction;
|
|
47
|
-
}
|
|
48
|
-
registerInteractionHandler(viewer) {
|
|
49
|
-
this.interactionHandler = new ViewerDragSelectInteractionHandler(viewer, this.interactionModel);
|
|
50
|
-
viewer.registerInteractionHandler(this.interactionHandler);
|
|
51
|
-
}
|
|
52
|
-
deregisterInteractionHandler() {
|
|
53
|
-
var _a;
|
|
54
|
-
(_a = this.interactionHandler) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
55
|
-
this.interactionHandler = undefined;
|
|
56
|
-
}
|
|
57
|
-
static get is() { return "vertex-viewer-drag-select"; }
|
|
58
|
-
static get encapsulation() { return "shadow"; }
|
|
59
|
-
static get originalStyleUrls() { return {
|
|
60
|
-
"$": ["viewer-drag-select.css"]
|
|
61
|
-
}; }
|
|
62
|
-
static get styleUrls() { return {
|
|
63
|
-
"$": ["viewer-drag-select.css"]
|
|
64
|
-
}; }
|
|
65
|
-
static get properties() { return {
|
|
66
|
-
"viewer": {
|
|
67
|
-
"type": "unknown",
|
|
68
|
-
"mutable": false,
|
|
69
|
-
"complexType": {
|
|
70
|
-
"original": "HTMLVertexViewerElement",
|
|
71
|
-
"resolved": "HTMLVertexViewerElement | undefined",
|
|
72
|
-
"references": {
|
|
73
|
-
"HTMLVertexViewerElement": {
|
|
74
|
-
"location": "global"
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
"required": false,
|
|
79
|
-
"optional": true,
|
|
80
|
-
"docs": {
|
|
81
|
-
"tags": [],
|
|
82
|
-
"text": "The viewer that this component is bound to. This is automatically assigned\nif added to the light-dom of a parent viewer element."
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
"controller": {
|
|
86
|
-
"type": "unknown",
|
|
87
|
-
"mutable": false,
|
|
88
|
-
"complexType": {
|
|
89
|
-
"original": "ViewerDragSelectController",
|
|
90
|
-
"resolved": "ViewerDragSelectController | undefined",
|
|
91
|
-
"references": {
|
|
92
|
-
"ViewerDragSelectController": {
|
|
93
|
-
"location": "import",
|
|
94
|
-
"path": "./controller"
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
"required": false,
|
|
99
|
-
"optional": true,
|
|
100
|
-
"docs": {
|
|
101
|
-
"tags": [],
|
|
102
|
-
"text": ""
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}; }
|
|
106
|
-
static get states() { return {
|
|
107
|
-
"dragRect": {},
|
|
108
|
-
"dragDirection": {}
|
|
109
|
-
}; }
|
|
110
|
-
static get watchers() { return [{
|
|
111
|
-
"propName": "viewer",
|
|
112
|
-
"methodName": "handleViewerChanged"
|
|
113
|
-
}]; }
|
|
114
|
-
}
|
|
115
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLWRyYWctc2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdmlld2VyLWRyYWctc2VsZWN0L3ZpZXdlci1kcmFnLXNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZFLE9BQU8sVUFBVSxNQUFNLFlBQVksQ0FBQztBQUVwQyxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUQsT0FBTyxFQUFFLGtDQUFrQyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDM0UsT0FBTyxFQUdMLHFCQUFxQixHQUN0QixNQUFNLFNBQVMsQ0FBQztBQU9qQixNQUFNLE9BQU8sZ0JBQWdCO0VBb0IzQjtJQUNFLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0VBQ2pFLENBQUM7RUFFTSxpQkFBaUI7SUFDdEIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUkscUJBQXFCLEVBQUUsQ0FBQztJQUVwRCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO0lBRWhFLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7RUFDeEMsQ0FBQztFQUVEOztLQUVHO0VBRU8sbUJBQW1CLENBQUMsU0FBbUM7SUFDL0QsSUFBSSxDQUFDLDRCQUE0QixFQUFFLENBQUM7SUFFcEMsSUFBSSxDQUFBLFNBQVMsYUFBVCxTQUFTLHVCQUFULFNBQVMsQ0FBRSxNQUFNLEtBQUksSUFBSSxFQUFFO01BQzdCLElBQUksQ0FBQywwQkFBMEIsQ0FBQyxTQUFTLENBQUMsQ0FBQztNQUMzQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksMEJBQTBCLENBQzlDLFNBQVMsRUFDVCxJQUFJLENBQUMsZ0JBQWdCLENBQ3RCLENBQUM7S0FDSDtFQUNILENBQUM7RUFFRDs7S0FFRztFQUNPLE1BQU07SUFDZCxPQUFPLENBQ0wsRUFBQyxJQUFJO01BQ0gsK0JBQ0csSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLElBQUksQ0FDeEIsV0FDRSxLQUFLLEVBQUUsVUFBVSxDQUFDLFNBQVMsRUFBRTtVQUMzQixTQUFTLEVBQUUsSUFBSSxDQUFDLGFBQWEsS0FBSyxPQUFPO1VBQ3pDLFNBQVMsRUFBRSxJQUFJLENBQUMsYUFBYSxLQUFLLE1BQU07U0FDekMsQ0FBQyxFQUNGLEtBQUssRUFBRTtVQUNMLElBQUksRUFBRSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJO1VBQzVCLEdBQUcsRUFBRSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJO1VBQzNCLEtBQUssRUFBRSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxJQUFJO1VBQ2pDLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxJQUFJO1NBQ3BDO1FBRUQsV0FDRSxLQUFLLEVBQUUsVUFBVSxDQUFDLE1BQU0sRUFBRTtZQUN4QixTQUFTLEVBQUUsSUFBSSxDQUFDLGFBQWEsS0FBSyxPQUFPO1lBQ3pDLFNBQVMsRUFBRSxJQUFJLENBQUMsYUFBYSxLQUFLLE1BQU07V0FDekMsQ0FBQyxHQUNGLENBQ0UsQ0FDUCxDQUNtQixDQUNqQixDQUNSLENBQUM7RUFDSixDQUFDO0VBRU8sbUJBQW1CLENBQUMsS0FBeUI7SUFDbkQsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUMsU0FBUyxDQUFDO0lBQ2hDLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDLFNBQVMsQ0FBQztFQUN2QyxDQUFDO0VBRU8sMEJBQTBCLENBQUMsTUFBK0I7SUFDaEUsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksa0NBQWtDLENBQzlELE1BQU0sRUFDTixJQUFJLENBQUMsZ0JBQWdCLENBQ3RCLENBQUM7SUFDRixNQUFNLENBQUMsMEJBQTBCLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLENBQUM7RUFDN0QsQ0FBQztFQUVPLDRCQUE0Qjs7SUFDbEMsTUFBQSxJQUFJLENBQUMsa0JBQWtCLDBDQUFFLE9BQU8sRUFBRSxDQUFDO0lBQ25DLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxTQUFTLENBQUM7RUFDdEMsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQUNGIn0=
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
/**!
|
|
2
|
-
* Copyright (c) 2022 Vertex Software LLC. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import { r as registerInstance, h, H as Host } from './index-26dfb2d0.js';
|
|
5
|
-
import { c as classnames } from './index-e841d91b.js';
|
|
6
|
-
import { p as point, i as rectangle } from './bundle.esm-ce2c7ad3.js';
|
|
7
|
-
import { E as EventDispatcher } from './browser.esm-ae4ca1f1.js';
|
|
8
|
-
import './_commonjsHelpers-11ca3be1.js';
|
|
9
|
-
|
|
10
|
-
class ViewerDragSelectController {
|
|
11
|
-
constructor(viewer, model) {
|
|
12
|
-
this.viewer = viewer;
|
|
13
|
-
this.model = model;
|
|
14
|
-
this.dragEndDisposable = this.model.onDragFinished(this.selectFromBounds);
|
|
15
|
-
}
|
|
16
|
-
dispose() {
|
|
17
|
-
var _a;
|
|
18
|
-
(_a = this.dragEndDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
19
|
-
}
|
|
20
|
-
async selectFromBounds(event) {
|
|
21
|
-
const scene = await this.viewer.scene();
|
|
22
|
-
await scene
|
|
23
|
-
.items((op) => op.where((q) => q.withVolumeIntersection(event.rectangle)).select())
|
|
24
|
-
.execute();
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
class ViewerDragSelectInteractionHandler {
|
|
29
|
-
constructor(viewer, dragSelectModel) {
|
|
30
|
-
this.viewer = viewer;
|
|
31
|
-
this.dragSelectModel = dragSelectModel;
|
|
32
|
-
this.handleDragBegin = this.handleDragBegin.bind(this);
|
|
33
|
-
this.handleDrag = this.handleDrag.bind(this);
|
|
34
|
-
this.handleDragEnd = this.handleDragEnd.bind(this);
|
|
35
|
-
}
|
|
36
|
-
initialize(element, api) {
|
|
37
|
-
this.element = element;
|
|
38
|
-
this.api = api;
|
|
39
|
-
this.element.addEventListener('pointerdown', this.handleDragBegin);
|
|
40
|
-
}
|
|
41
|
-
dispose() {
|
|
42
|
-
var _a, _b, _c;
|
|
43
|
-
(_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', this.handleDragBegin);
|
|
44
|
-
(_b = this.element) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointermove', this.handleDrag);
|
|
45
|
-
(_c = this.element) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerup', this.handleDragEnd);
|
|
46
|
-
}
|
|
47
|
-
handleDragBegin(event) {
|
|
48
|
-
var _a, _b;
|
|
49
|
-
if (event.buttons === 1) {
|
|
50
|
-
this.viewer.cameraControls = false;
|
|
51
|
-
this.dragSelectModel.updateStartPoint(point.create(event.offsetX, event.offsetY));
|
|
52
|
-
(_a = this.element) === null || _a === void 0 ? void 0 : _a.addEventListener('pointermove', this.handleDrag);
|
|
53
|
-
(_b = this.element) === null || _b === void 0 ? void 0 : _b.addEventListener('pointerup', this.handleDragEnd);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
handleDrag(event) {
|
|
57
|
-
this.dragSelectModel.updateEndPoint(point.create(event.offsetX, event.offsetY));
|
|
58
|
-
}
|
|
59
|
-
handleDragEnd() {
|
|
60
|
-
var _a, _b;
|
|
61
|
-
this.viewer.cameraControls = true;
|
|
62
|
-
this.dragSelectModel.clear();
|
|
63
|
-
(_a = this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointermove', this.handleDrag);
|
|
64
|
-
(_b = this.element) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointerup', this.handleDragEnd);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
class ViewerDragSelectModel {
|
|
69
|
-
constructor() {
|
|
70
|
-
this.dragFinished = new EventDispatcher();
|
|
71
|
-
this.boundsChanged = new EventDispatcher();
|
|
72
|
-
}
|
|
73
|
-
updateStartPoint(point) {
|
|
74
|
-
this.dragStartPoint = point;
|
|
75
|
-
}
|
|
76
|
-
updateEndPoint(point$1) {
|
|
77
|
-
var _a;
|
|
78
|
-
this.dragEndPoint = point$1;
|
|
79
|
-
this.direction =
|
|
80
|
-
point.subtract(point$1, (_a = this.dragStartPoint) !== null && _a !== void 0 ? _a : point$1).x > 0
|
|
81
|
-
? 'right'
|
|
82
|
-
: 'left';
|
|
83
|
-
this.boundsChanged.emit({
|
|
84
|
-
rectangle: this.getDragBounds(),
|
|
85
|
-
direction: this.getDragDirection(),
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
clear() {
|
|
89
|
-
this.dragFinished.emit({
|
|
90
|
-
rectangle: this.getDragBounds(),
|
|
91
|
-
direction: this.getDragDirection(),
|
|
92
|
-
});
|
|
93
|
-
this.dragStartPoint = undefined;
|
|
94
|
-
this.dragEndPoint = undefined;
|
|
95
|
-
this.boundsChanged.emit({});
|
|
96
|
-
}
|
|
97
|
-
onDragFinished(listener) {
|
|
98
|
-
return this.dragFinished.on(listener);
|
|
99
|
-
}
|
|
100
|
-
onBoundsChanged(listener) {
|
|
101
|
-
return this.boundsChanged.on(listener);
|
|
102
|
-
}
|
|
103
|
-
getDragBounds() {
|
|
104
|
-
if (this.dragStartPoint != null && this.dragEndPoint != null) {
|
|
105
|
-
return rectangle.fromPoints(this.dragStartPoint, this.dragEndPoint);
|
|
106
|
-
}
|
|
107
|
-
return rectangle.create(0, 0, 0, 0);
|
|
108
|
-
}
|
|
109
|
-
getDragDirection() {
|
|
110
|
-
var _a;
|
|
111
|
-
return (_a = this.direction) !== null && _a !== void 0 ? _a : 'right';
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
const viewerDragSelectCss = ":host{--viewer-drag-select-outline-exclusive-border-color:#5555ff;--viewer-drag-select-outline-exclusive-border-style:solid;--viewer-drag-select-outline-exclusive-fill-color:blue;--viewer-drag-select-outline-inclusive-border-color:#ff5555;--viewer-drag-select-outline-inclusive-border-style:dashed;--viewer-drag-select-outline-inclusive-fill-color:red;--viewer-drag-select-outline-fill-opacity:0.1}.outline{position:absolute}.outline.exclusive{border:3px var(--viewer-drag-select-outline-exclusive-border-style) var(--viewer-drag-select-outline-exclusive-border-color)}.outline.inclusive{border:3px var(--viewer-drag-select-outline-inclusive-border-style) var(--viewer-drag-select-outline-inclusive-border-color)}.fill{position:relative;width:100%;height:100%;opacity:var(--viewer-drag-select-outline-fill-opacity)}.fill.exclusive{background-color:var(--viewer-drag-select-outline-exclusive-fill-color)}.fill.inclusive{background-color:var(--viewer-drag-select-outline-inclusive-fill-color)}";
|
|
116
|
-
|
|
117
|
-
const ViewerDragSelect = class {
|
|
118
|
-
constructor(hostRef) {
|
|
119
|
-
registerInstance(this, hostRef);
|
|
120
|
-
this.handleBoundsChanged = this.handleBoundsChanged.bind(this);
|
|
121
|
-
}
|
|
122
|
-
componentWillLoad() {
|
|
123
|
-
this.interactionModel = new ViewerDragSelectModel();
|
|
124
|
-
this.interactionModel.onBoundsChanged(this.handleBoundsChanged);
|
|
125
|
-
this.handleViewerChanged(this.viewer);
|
|
126
|
-
}
|
|
127
|
-
/**
|
|
128
|
-
* @ignore
|
|
129
|
-
*/
|
|
130
|
-
handleViewerChanged(newViewer) {
|
|
131
|
-
this.deregisterInteractionHandler();
|
|
132
|
-
if ((newViewer === null || newViewer === void 0 ? void 0 : newViewer.stream) != null) {
|
|
133
|
-
this.registerInteractionHandler(newViewer);
|
|
134
|
-
this.controller = new ViewerDragSelectController(newViewer, this.interactionModel);
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
/**
|
|
138
|
-
* @ignore
|
|
139
|
-
*/
|
|
140
|
-
render() {
|
|
141
|
-
return (h(Host, null, h("vertex-viewer-layer", null, this.dragRect != null && (h("div", { class: classnames('outline', {
|
|
142
|
-
exclusive: this.dragDirection === 'right',
|
|
143
|
-
inclusive: this.dragDirection === 'left',
|
|
144
|
-
}), style: {
|
|
145
|
-
left: `${this.dragRect.x}px`,
|
|
146
|
-
top: `${this.dragRect.y}px`,
|
|
147
|
-
width: `${this.dragRect.width}px`,
|
|
148
|
-
height: `${this.dragRect.height}px`,
|
|
149
|
-
} }, h("div", { class: classnames('fill', {
|
|
150
|
-
exclusive: this.dragDirection === 'right',
|
|
151
|
-
inclusive: this.dragDirection === 'left',
|
|
152
|
-
}) }))))));
|
|
153
|
-
}
|
|
154
|
-
handleBoundsChanged(event) {
|
|
155
|
-
this.dragRect = event.rectangle;
|
|
156
|
-
this.dragDirection = event.direction;
|
|
157
|
-
}
|
|
158
|
-
registerInteractionHandler(viewer) {
|
|
159
|
-
this.interactionHandler = new ViewerDragSelectInteractionHandler(viewer, this.interactionModel);
|
|
160
|
-
viewer.registerInteractionHandler(this.interactionHandler);
|
|
161
|
-
}
|
|
162
|
-
deregisterInteractionHandler() {
|
|
163
|
-
var _a;
|
|
164
|
-
(_a = this.interactionHandler) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
165
|
-
this.interactionHandler = undefined;
|
|
166
|
-
}
|
|
167
|
-
static get watchers() { return {
|
|
168
|
-
"viewer": ["handleViewerChanged"]
|
|
169
|
-
}; }
|
|
170
|
-
};
|
|
171
|
-
ViewerDragSelect.style = viewerDragSelectCss;
|
|
172
|
-
|
|
173
|
-
export { ViewerDragSelect as vertex_viewer_drag_select };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { DragFinishedEvent, ViewerDragSelectModel } from './model';
|
|
2
|
-
export declare class ViewerDragSelectController {
|
|
3
|
-
private viewer;
|
|
4
|
-
private model;
|
|
5
|
-
private dragEndDisposable?;
|
|
6
|
-
constructor(viewer: HTMLVertexViewerElement, model: ViewerDragSelectModel);
|
|
7
|
-
dispose(): void;
|
|
8
|
-
selectFromBounds(event: DragFinishedEvent): Promise<void>;
|
|
9
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { InteractionApi } from '../../lib/interactions';
|
|
2
|
-
import { InteractionHandler } from '../../lib/interactions/interactionHandler';
|
|
3
|
-
import { ViewerDragSelectModel } from './model';
|
|
4
|
-
export declare class ViewerDragSelectInteractionHandler implements InteractionHandler {
|
|
5
|
-
private viewer;
|
|
6
|
-
private dragSelectModel;
|
|
7
|
-
private element?;
|
|
8
|
-
private api?;
|
|
9
|
-
constructor(viewer: HTMLVertexViewerElement, dragSelectModel: ViewerDragSelectModel);
|
|
10
|
-
initialize(element: HTMLElement, api: InteractionApi): void;
|
|
11
|
-
dispose(): void;
|
|
12
|
-
private handleDragBegin;
|
|
13
|
-
private handleDrag;
|
|
14
|
-
private handleDragEnd;
|
|
15
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Point, Rectangle } from '@vertexvis/geometry';
|
|
2
|
-
import { Disposable, Listener } from '@vertexvis/utils';
|
|
3
|
-
export declare type ViewerDragSelectDirection = 'left' | 'right';
|
|
4
|
-
export interface BoundsChangedEvent {
|
|
5
|
-
rectangle?: Rectangle.Rectangle;
|
|
6
|
-
direction?: ViewerDragSelectDirection;
|
|
7
|
-
}
|
|
8
|
-
export interface DragFinishedEvent {
|
|
9
|
-
rectangle: Rectangle.Rectangle;
|
|
10
|
-
direction: ViewerDragSelectDirection;
|
|
11
|
-
}
|
|
12
|
-
export declare class ViewerDragSelectModel {
|
|
13
|
-
private dragStartPoint?;
|
|
14
|
-
private dragEndPoint?;
|
|
15
|
-
private direction?;
|
|
16
|
-
private dragFinished;
|
|
17
|
-
private boundsChanged;
|
|
18
|
-
updateStartPoint(point: Point.Point): void;
|
|
19
|
-
updateEndPoint(point: Point.Point): void;
|
|
20
|
-
clear(): void;
|
|
21
|
-
onDragFinished(listener: Listener<DragFinishedEvent>): Disposable;
|
|
22
|
-
onBoundsChanged(listener: Listener<BoundsChangedEvent>): Disposable;
|
|
23
|
-
private getDragBounds;
|
|
24
|
-
private getDragDirection;
|
|
25
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { h } from '../../stencil-public-runtime';
|
|
2
|
-
import { ViewerDragSelectController } from './controller';
|
|
3
|
-
export declare class ViewerDragSelect {
|
|
4
|
-
/**
|
|
5
|
-
* The viewer that this component is bound to. This is automatically assigned
|
|
6
|
-
* if added to the light-dom of a parent viewer element.
|
|
7
|
-
*/
|
|
8
|
-
viewer?: HTMLVertexViewerElement;
|
|
9
|
-
controller?: ViewerDragSelectController;
|
|
10
|
-
private dragRect?;
|
|
11
|
-
private dragDirection?;
|
|
12
|
-
private interactionModel;
|
|
13
|
-
private interactionHandler?;
|
|
14
|
-
constructor();
|
|
15
|
-
componentWillLoad(): void;
|
|
16
|
-
/**
|
|
17
|
-
* @ignore
|
|
18
|
-
*/
|
|
19
|
-
protected handleViewerChanged(newViewer?: HTMLVertexViewerElement): void;
|
|
20
|
-
/**
|
|
21
|
-
* @ignore
|
|
22
|
-
*/
|
|
23
|
-
protected render(): h.JSX.IntrinsicElements;
|
|
24
|
-
private handleBoundsChanged;
|
|
25
|
-
private registerInteractionHandler;
|
|
26
|
-
private deregisterInteractionHandler;
|
|
27
|
-
}
|