@cogic/annotorious 2.7.19 → 2.7.21

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.
Files changed (16) hide show
  1. package/dist/annotorious.min.css +4 -1
  2. package/dist/annotorious.min.css.map +1 -0
  3. package/dist/annotorious.min.js +3 -25
  4. package/dist/annotorious.min.js.LICENSE.txt +14 -0
  5. package/dist/annotorious.min.js.map +1 -0
  6. package/dist/annotorious.umd.js.map +1 -1
  7. package/dist/examples/custom-style/index.html +0 -0
  8. package/dist/examples/editor-plugin/index.html +0 -0
  9. package/dist/examples/formatter/index.html +0 -0
  10. package/dist/examples/headless/index.html +0 -0
  11. package/dist/examples/selectorpack/index.html +0 -0
  12. package/dist/index.html +4 -31
  13. package/package.json +1 -1
  14. package/public/index.html +1 -0
  15. package/src/tools/Tool.js +8 -6
  16. package/src/tools/rectangle/RubberbandRectTool.js +7 -4
package/dist/examples/formatter/index.html CHANGED
Binary file
package/dist/examples/headless/index.html CHANGED
Binary file
package/dist/index.html CHANGED
@@ -1,11 +1,4 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <title>Annotorious | Basic Example</title>
6
- <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
7
- <style>
8
- html, body {
1
+ <!doctype html><html><head><meta charset="utf-8"/><title>Annotorious | Basic Example</title><link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"><style>html, body {
9
2
  padding:20px;
10
3
  margin:0px;
11
4
  font-family:'Lato', sans-serif;
@@ -37,25 +30,7 @@
37
30
 
38
31
  p.caption a {
39
32
  color:#3f3f3f;
40
- }
41
- </style>
42
- </head>
43
- <body>
44
- <div id="content">
45
- <h1>Annotorious: Basic Example</h1>
46
- <p class="instructions">
47
- Click the annotation to edit. Click and drag the mouse to create a new annotation.
48
- </p>
49
- <p>
50
- <button id="current-tool">RECTANGLE</button>
51
- </p>
52
- <div>
53
- <img id="hallstatt" src="640px-Hallstatt.jpg">
54
- </div>
55
- </div>
56
- </div>
57
- <script>
58
- window.onload = function() {
33
+ }</style><link href="annotorious.min.css" rel="stylesheet"><script src="annotorious.min.js"></script></head><body><div id="content"><h1>Annotorious: Basic Example</h1><p class="instructions">Click the annotation to edit. Click and drag the mouse to create a new annotation.</p><p><button id="current-tool">RECTANGLE</button></p><div><img id="hallstatt" src="640px-Hallstatt.jpg"></div></div><script>window.onload = function() {
59
34
  anno = Annotorious.init({
60
35
  image: 'hallstatt',
61
36
  locale: 'auto',
@@ -70,6 +45,7 @@
70
45
  crosshairWithCursor: true,
71
46
  disableEscapeKey: false,
72
47
  disableDeleteKey: false,
48
+ bindEventListenersInternally: true,
73
49
 
74
50
  // Only works when drawOnSingleClick is true
75
51
  addPolygonPointOnMouseDown: true,
@@ -133,7 +109,4 @@
133
109
  anno.setDrawingTool('rect');
134
110
  }
135
111
  });
136
- }
137
- </script>
138
- </body>
139
- </html>
112
+ }</script></body></html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cogic/annotorious",
3
- "version": "2.7.19",
3
+ "version": "2.7.21",
4
4
  "description": "A JavaScript image annotation library",
5
5
  "main": "dist/annotorious.min.js",
6
6
  "scripts": {
package/public/index.html CHANGED
@@ -70,6 +70,7 @@
70
70
  crosshairWithCursor: true,
71
71
  disableEscapeKey: false,
72
72
  disableDeleteKey: false,
73
+ bindEventListenersInternally: true,
73
74
 
74
75
  // Only works when drawOnSingleClick is true
75
76
  addPolygonPointOnMouseDown: true,
package/src/tools/Tool.js CHANGED
@@ -153,6 +153,7 @@ export class ToolLike extends EventEmitter {
153
153
  * Base class that adds some convenience stuff for tool plugins.
154
154
  */
155
155
  export default class Tool extends ToolLike {
156
+ _eventTarget
156
157
 
157
158
  constructor(g, config, env) {
158
159
  super(g, config, env);
@@ -161,6 +162,7 @@ export default class Tool extends ToolLike {
161
162
  // the user has started moving, so we can
162
163
  // fire the startSelection event
163
164
  this.started = false;
165
+ this._eventTarget = this.config.bindEventListenersInternally === true ? this.svg : document;
164
166
  }
165
167
 
166
168
  attachListeners = ({ mouseMove, mouseUp, mouseDown, dblClick }) => {
@@ -189,7 +191,7 @@ export default class Tool extends ToolLike {
189
191
  }
190
192
 
191
193
  // Mouse up goes on doc, so we capture events outside, too
192
- document.addEventListener('mouseup', this.mouseUp);
194
+ this._eventTarget.addEventListener('mouseup', this.mouseUp);
193
195
  }
194
196
 
195
197
  if (mouseDown) {
@@ -200,7 +202,7 @@ export default class Tool extends ToolLike {
200
202
  }
201
203
 
202
204
  // Mouse down goes on doc, so we capture events outside, too
203
- document.addEventListener('mousedown', this.mouseDown);
205
+ this._eventTarget.addEventListener('mousedown', this.mouseDown);
204
206
  }
205
207
 
206
208
  if (dblClick) {
@@ -209,7 +211,7 @@ export default class Tool extends ToolLike {
209
211
  dblClick(x, y, evt);
210
212
  }
211
213
 
212
- document.addEventListener('dblclick', this.dblClick);
214
+ this._eventTarget.addEventListener('dblclick', this.dblClick);
213
215
  }
214
216
 
215
217
  }
@@ -219,13 +221,13 @@ export default class Tool extends ToolLike {
219
221
  this.svg.removeEventListener('mousemove', this.mouseMove);
220
222
 
221
223
  if (this.mouseUp)
222
- document.removeEventListener('mouseup', this.mouseUp);
224
+ this._eventTarget.removeEventListener('mouseup', this.mouseUp);
223
225
 
224
226
  if (this.mouseDown)
225
- document.removeEventListener('mousedown', this.mouseDown);
227
+ this._eventTarget.removeEventListener('mousedown', this.mouseDown);
226
228
 
227
229
  if (this.dblClick)
228
- document.removeEventListener('dblclick', this.dblClick);
230
+ this._eventTarget.removeEventListener('dblclick', this.dblClick);
229
231
  }
230
232
 
231
233
  /**
package/src/tools/rectangle/RubberbandRectTool.js CHANGED
@@ -12,9 +12,12 @@ export default class RubberbandRectTool extends Tool {
12
12
  super(g, config, env);
13
13
 
14
14
  this.rubberband = null;
15
+ this._startOnSingleClick = false;
15
16
  }
16
17
 
17
- startDrawing = (x, y) => {
18
+ startDrawing = (x, y, startOnSingleClick) => {
19
+ this._startOnSingleClick = startOnSingleClick;
20
+
18
21
  this.attachListeners({
19
22
  mouseMove: this.onMouseMove,
20
23
  mouseUp: this.onMouseUp
@@ -56,11 +59,11 @@ export default class RubberbandRectTool extends Tool {
56
59
 
57
60
  // Emit the completed shape...
58
61
  this.emit('complete', element);
59
- } else {
62
+ this.stop();
63
+ } else if (!this._startOnSingleClick) {
60
64
  this.emit('cancel');
65
+ this.stop();
61
66
  }
62
-
63
- this.stop();
64
67
  }
65
68
 
66
69
  get isDrawing() {