@operato/image-marker 8.0.0-alpha.23 → 8.0.0-alpha.24
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/CHANGELOG.md +9 -0
- package/dist/src/ox-image-marker-mode.d.ts +2 -2
- package/dist/src/ox-image-marker-mode.js +13 -13
- package/dist/src/ox-image-marker-mode.js.map +1 -1
- package/dist/src/ox-image-marker.d.ts +11 -8
- package/dist/src/ox-image-marker.js +111 -81
- package/dist/src/ox-image-marker.js.map +1 -1
- package/dist/src/types.d.ts +1 -1
- package/dist/src/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-image-marker-mode.ts +15 -15
- package/src/ox-image-marker.ts +116 -81
- package/src/types.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [8.0.0-alpha.24](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.23...v8.0.0-alpha.24) (2024-10-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* support touch gesture for ox-image-markers ([848bb9a](https://github.com/hatiolab/operato/commit/848bb9a31a303ca9e6db302a0294b4c0856b9471))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [8.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.22...v8.0.0-alpha.23) (2024-10-05)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -6,8 +6,8 @@ export declare class OxImageMarkerMode extends LitElement {
|
|
|
6
6
|
currentMode: ImageMarkerMode;
|
|
7
7
|
currentShapeType?: ShapeType;
|
|
8
8
|
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
setMode(mode: ImageMarkerMode): void;
|
|
10
|
+
protected setShape(shapeType: ShapeType): void;
|
|
11
11
|
private onClickDelete;
|
|
12
12
|
private onClickSave;
|
|
13
13
|
private onClickFitSize;
|
|
@@ -5,7 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
5
5
|
let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
|
-
this.currentMode = '
|
|
8
|
+
this.currentMode = 'edit';
|
|
9
9
|
}
|
|
10
10
|
static { this.styles = css `
|
|
11
11
|
:host {
|
|
@@ -42,50 +42,50 @@ let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
|
|
|
42
42
|
return html `
|
|
43
43
|
<div class="palette">
|
|
44
44
|
<md-icon
|
|
45
|
-
title="
|
|
46
|
-
?selected=${this.currentMode !== '
|
|
47
|
-
@click=${() => this.setMode(this.currentMode !== '
|
|
48
|
-
>${this.currentMode !== '
|
|
45
|
+
title="Edit or View"
|
|
46
|
+
?selected=${this.currentMode !== 'shape'}
|
|
47
|
+
@click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}
|
|
48
|
+
>${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon
|
|
49
49
|
>
|
|
50
50
|
|
|
51
51
|
<md-icon
|
|
52
52
|
title="Text"
|
|
53
|
-
?selected=${this.currentMode === '
|
|
53
|
+
?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}
|
|
54
54
|
@click=${() => this.setShape('text')}
|
|
55
55
|
>match_case</md-icon
|
|
56
56
|
>
|
|
57
57
|
|
|
58
58
|
<md-icon
|
|
59
59
|
title="Rectangle"
|
|
60
|
-
?selected=${this.currentMode === '
|
|
60
|
+
?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}
|
|
61
61
|
@click=${() => this.setShape('rectangle')}
|
|
62
62
|
>rectangle</md-icon
|
|
63
63
|
>
|
|
64
64
|
|
|
65
65
|
<md-icon
|
|
66
66
|
title="Circle"
|
|
67
|
-
?selected=${this.currentMode === '
|
|
67
|
+
?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}
|
|
68
68
|
@click=${() => this.setShape('circle')}
|
|
69
69
|
>circle</md-icon
|
|
70
70
|
>
|
|
71
71
|
|
|
72
72
|
<md-icon
|
|
73
73
|
title="Triangle"
|
|
74
|
-
?selected=${this.currentMode === '
|
|
74
|
+
?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}
|
|
75
75
|
@click=${() => this.setShape('triangle')}
|
|
76
76
|
>change_history</md-icon
|
|
77
77
|
>
|
|
78
78
|
|
|
79
79
|
<md-icon
|
|
80
80
|
title="Line"
|
|
81
|
-
?selected=${this.currentMode === '
|
|
81
|
+
?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}
|
|
82
82
|
@click=${() => this.setShape('line')}
|
|
83
83
|
>shape_line</md-icon
|
|
84
84
|
>
|
|
85
85
|
|
|
86
86
|
<md-icon
|
|
87
87
|
title="Arrow"
|
|
88
|
-
?selected=${this.currentMode === '
|
|
88
|
+
?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}
|
|
89
89
|
@click=${() => this.setShape('arrow')}
|
|
90
90
|
>line_end_arrow</md-icon
|
|
91
91
|
>
|
|
@@ -110,10 +110,10 @@ let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
|
|
|
110
110
|
}));
|
|
111
111
|
}
|
|
112
112
|
setShape(shapeType) {
|
|
113
|
-
this.currentMode = '
|
|
113
|
+
this.currentMode = 'shape';
|
|
114
114
|
this.currentShapeType = shapeType;
|
|
115
115
|
this.dispatchEvent(new CustomEvent('mode-changed', {
|
|
116
|
-
detail: { mode: '
|
|
116
|
+
detail: { mode: 'shape', shapeType: this.currentShapeType },
|
|
117
117
|
bubbles: true,
|
|
118
118
|
composed: true
|
|
119
119
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-image-marker-mode.js","sourceRoot":"","sources":["../../src/ox-image-marker-mode.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAiCuB,gBAAW,GAAoB,
|
|
1
|
+
{"version":3,"file":"ox-image-marker-mode.js","sourceRoot":"","sources":["../../src/ox-image-marker-mode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ImageMarkerMode, ShapeType } from './types'\n\n@customElement('ox-image-marker-mode')\nexport class OxImageMarkerMode extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-medium);\n }\n\n .palette {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-small);\n justify-content: center;\n margin: var(--spacing-medium);\n\n --md-icon-size: 16px;\n }\n\n .palette > * {\n padding: var(--spacing-small);\n cursor: pointer;\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 4px;\n width: 12px;\n height: 12px;\n }\n\n .palette [selected] {\n background-color: #d0d0d0;\n }\n `\n\n @property({ type: String }) currentMode: ImageMarkerMode = 'edit'\n @property({ type: String }) currentShapeType?: ShapeType\n\n render() {\n return html`\n <div class=\"palette\">\n <md-icon\n title=\"Edit or View\"\n ?selected=${this.currentMode !== 'shape'}\n @click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}\n >${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon\n >\n\n <md-icon\n title=\"Text\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}\n @click=${() => this.setShape('text')}\n >match_case</md-icon\n >\n\n <md-icon\n title=\"Rectangle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}\n @click=${() => this.setShape('rectangle')}\n >rectangle</md-icon\n >\n\n <md-icon\n title=\"Circle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}\n @click=${() => this.setShape('circle')}\n >circle</md-icon\n >\n\n <md-icon\n title=\"Triangle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}\n @click=${() => this.setShape('triangle')}\n >change_history</md-icon\n >\n\n <md-icon\n title=\"Line\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}\n @click=${() => this.setShape('line')}\n >shape_line</md-icon\n >\n\n <md-icon\n title=\"Arrow\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}\n @click=${() => this.setShape('arrow')}\n >line_end_arrow</md-icon\n >\n </div>\n\n <div class=\"palette\">\n <md-icon title=\"Fit size\" @click=${() => this.onClickFitSize()}>recenter</md-icon>\n </div>\n\n <div class=\"palette\">\n <md-icon title=\"Delete\" @click=${() => this.onClickDelete()}>delete</md-icon>\n <md-icon title=\"Save\" @click=${() => this.onClickSave()}>save</md-icon>\n </div>\n `\n }\n\n public setMode(mode: ImageMarkerMode) {\n this.currentMode = mode\n\n this.dispatchEvent(\n new CustomEvent('mode-changed', {\n detail: { mode: this.currentMode, shapeType: this.currentShapeType },\n bubbles: true,\n composed: true\n })\n )\n }\n\n protected setShape(shapeType: ShapeType) {\n this.currentMode = 'shape'\n this.currentShapeType = shapeType\n this.dispatchEvent(\n new CustomEvent('mode-changed', {\n detail: { mode: 'shape', shapeType: this.currentShapeType },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickDelete() {\n this.dispatchEvent(\n new CustomEvent('tap-delete', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickSave() {\n this.dispatchEvent(\n new CustomEvent('tap-save', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickFitSize() {\n this.dispatchEvent(\n new CustomEvent('tap-fit-size', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -2,11 +2,13 @@ import './ox-image-marker-mode';
|
|
|
2
2
|
import { nothing } from 'lit';
|
|
3
3
|
import { Shape } from './types';
|
|
4
4
|
import { BaseImageMarker } from './base-image-marker';
|
|
5
|
+
import { OxImageMarkerMode } from './ox-image-marker-mode';
|
|
5
6
|
export declare class OxImageMarker extends BaseImageMarker {
|
|
6
7
|
static styles: import("lit").CSSResult[];
|
|
7
8
|
private currentShapeType?;
|
|
8
9
|
private currentMode;
|
|
9
10
|
private selectedShape;
|
|
11
|
+
imageMarkerMode: OxImageMarkerMode;
|
|
10
12
|
private drawing;
|
|
11
13
|
private startX;
|
|
12
14
|
private startY;
|
|
@@ -19,17 +21,18 @@ export declare class OxImageMarker extends BaseImageMarker {
|
|
|
19
21
|
protected onSvgTouchStart: (event: TouchEvent) => void;
|
|
20
22
|
private startDrawing;
|
|
21
23
|
private setMode;
|
|
22
|
-
private
|
|
23
|
-
private
|
|
24
|
+
private onMouseMoveForDrawing;
|
|
25
|
+
private onMouseUpForDrawing;
|
|
26
|
+
private setSelectedShape;
|
|
24
27
|
private getSvgPoint;
|
|
25
28
|
protected renderShape(shape: Shape): import("lit-html").TemplateResult<2> | typeof nothing;
|
|
26
|
-
private
|
|
27
|
-
private
|
|
28
|
-
private
|
|
29
|
+
private onMouseDownOnShape;
|
|
30
|
+
private onMouseMoveOnShape;
|
|
31
|
+
private onMouseUpOnShape;
|
|
29
32
|
private renderResizeHandles;
|
|
30
|
-
private
|
|
31
|
-
private
|
|
32
|
-
private
|
|
33
|
+
private onResizeHandleMouseDown;
|
|
34
|
+
private onResizeHandleMouseMove;
|
|
35
|
+
private onResizeHandleMouseUp;
|
|
33
36
|
private onTextDoubleClick;
|
|
34
37
|
private showTextInput;
|
|
35
38
|
private adjustInputWidth;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import './ox-image-marker-mode';
|
|
3
3
|
import { html, css, svg, nothing } from 'lit';
|
|
4
|
-
import { state, customElement } from 'lit/decorators.js';
|
|
4
|
+
import { query, state, customElement } from 'lit/decorators.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
6
|
import { keyed } from 'lit/directives/keyed.js';
|
|
7
7
|
import { BaseImageMarker } from './base-image-marker';
|
|
8
8
|
let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
|
-
this.currentMode = '
|
|
11
|
+
this.currentMode = 'edit';
|
|
12
12
|
this.selectedShape = null;
|
|
13
13
|
this.drawing = false;
|
|
14
14
|
this.startX = 0;
|
|
@@ -21,22 +21,19 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
21
21
|
this.resetZoom();
|
|
22
22
|
}
|
|
23
23
|
if (event.touches.length === 1) {
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
26
|
-
return { ...s, selected: false };
|
|
27
|
-
});
|
|
28
|
-
if (this.currentMode === 'move') {
|
|
29
|
-
this.startPanning(event);
|
|
30
|
-
}
|
|
31
|
-
else if (this.currentMode === 'draw') {
|
|
24
|
+
this.setSelectedShape(null);
|
|
25
|
+
if (this.currentMode === 'shape') {
|
|
32
26
|
this.startDrawing(event);
|
|
33
27
|
}
|
|
28
|
+
else {
|
|
29
|
+
this.startPanning(event);
|
|
30
|
+
}
|
|
34
31
|
}
|
|
35
32
|
else if (event.touches.length === 2) {
|
|
36
33
|
this.startPinchZooming(event);
|
|
37
34
|
}
|
|
38
35
|
};
|
|
39
|
-
this.
|
|
36
|
+
this.onMouseMoveForDrawing = (event) => {
|
|
40
37
|
if (!this.drawing) {
|
|
41
38
|
return;
|
|
42
39
|
}
|
|
@@ -100,8 +97,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
100
97
|
default:
|
|
101
98
|
return;
|
|
102
99
|
}
|
|
103
|
-
this.selectedShape = newShape;
|
|
104
100
|
this.shapes = [...this.shapes, newShape];
|
|
101
|
+
this.setSelectedShape(newShape);
|
|
105
102
|
}
|
|
106
103
|
if (this.selectedShape) {
|
|
107
104
|
switch (this.selectedShape.type) {
|
|
@@ -132,24 +129,22 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
132
129
|
this.requestUpdate();
|
|
133
130
|
}
|
|
134
131
|
};
|
|
135
|
-
this.
|
|
132
|
+
this.onMouseUpForDrawing = (event) => {
|
|
136
133
|
event.preventDefault();
|
|
137
134
|
this.drawing = false;
|
|
138
135
|
const svg = this.svg;
|
|
139
136
|
if ('touches' in event) {
|
|
140
|
-
svg.removeEventListener('touchmove', this.
|
|
141
|
-
svg.removeEventListener('touchend', this.
|
|
137
|
+
svg.removeEventListener('touchmove', this.onMouseMoveForDrawing);
|
|
138
|
+
svg.removeEventListener('touchend', this.onMouseUpForDrawing);
|
|
142
139
|
}
|
|
143
140
|
else {
|
|
144
|
-
svg.removeEventListener('mousemove', this.
|
|
145
|
-
svg.removeEventListener('mouseup', this.
|
|
146
|
-
}
|
|
147
|
-
if (this.selectedShape) {
|
|
148
|
-
this.selectedShape.selected = true;
|
|
141
|
+
svg.removeEventListener('mousemove', this.onMouseMoveForDrawing);
|
|
142
|
+
svg.removeEventListener('mouseup', this.onMouseUpForDrawing);
|
|
149
143
|
}
|
|
144
|
+
this.imageMarkerMode.setMode('edit');
|
|
150
145
|
this.requestUpdate();
|
|
151
146
|
};
|
|
152
|
-
this.
|
|
147
|
+
this.onMouseMoveOnShape = (event) => {
|
|
153
148
|
if (!this.selectedShape) {
|
|
154
149
|
return;
|
|
155
150
|
}
|
|
@@ -186,31 +181,25 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
186
181
|
}
|
|
187
182
|
this.requestUpdate();
|
|
188
183
|
};
|
|
189
|
-
this.
|
|
184
|
+
this.onMouseUpOnShape = (event) => {
|
|
190
185
|
event.preventDefault();
|
|
191
186
|
const svg = this.svg;
|
|
192
187
|
if ('touches' in event) {
|
|
193
|
-
svg.removeEventListener('touchmove', this.
|
|
194
|
-
svg.removeEventListener('touchend', this.
|
|
188
|
+
svg.removeEventListener('touchmove', this.onMouseMoveOnShape);
|
|
189
|
+
svg.removeEventListener('touchend', this.onMouseUpOnShape);
|
|
195
190
|
}
|
|
196
191
|
else {
|
|
197
|
-
svg.removeEventListener('mousemove', this.
|
|
198
|
-
svg.removeEventListener('mouseup', this.
|
|
192
|
+
svg.removeEventListener('mousemove', this.onMouseMoveOnShape);
|
|
193
|
+
svg.removeEventListener('mouseup', this.onMouseUpOnShape);
|
|
199
194
|
}
|
|
200
195
|
};
|
|
201
|
-
this.
|
|
196
|
+
this.onResizeHandleMouseMove = (event) => {
|
|
202
197
|
if (!this.selectedShape) {
|
|
203
198
|
return;
|
|
204
199
|
}
|
|
205
200
|
event.preventDefault();
|
|
206
201
|
const { x, y } = this.getSvgPoint(event);
|
|
207
202
|
switch (this.selectedShape.type) {
|
|
208
|
-
// case 'text':
|
|
209
|
-
// this.selectedShape.width = Math.abs(x - this.selectedShape.x!)
|
|
210
|
-
// this.selectedShape.height = Math.abs(y - this.selectedShape.y!)
|
|
211
|
-
// if (x < this.selectedShape.x!) this.selectedShape.x = x
|
|
212
|
-
// if (y < this.selectedShape.y!) this.selectedShape.y = y
|
|
213
|
-
// break
|
|
214
203
|
case 'rectangle':
|
|
215
204
|
const startX = this.selectedShape.x;
|
|
216
205
|
const startY = this.selectedShape.y;
|
|
@@ -278,18 +267,17 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
278
267
|
}
|
|
279
268
|
this.requestUpdate();
|
|
280
269
|
};
|
|
281
|
-
this.
|
|
270
|
+
this.onResizeHandleMouseUp = (event) => {
|
|
282
271
|
event.preventDefault();
|
|
283
272
|
const svg = this.svg;
|
|
284
273
|
if ('touches' in event) {
|
|
285
|
-
svg.removeEventListener('touchmove', this.
|
|
286
|
-
svg.removeEventListener('touchend', this.
|
|
274
|
+
svg.removeEventListener('touchmove', this.onResizeHandleMouseMove);
|
|
275
|
+
svg.removeEventListener('touchend', this.onResizeHandleMouseUp);
|
|
287
276
|
}
|
|
288
277
|
else {
|
|
289
|
-
svg.removeEventListener('mousemove', this.
|
|
290
|
-
svg.removeEventListener('mouseup', this.
|
|
278
|
+
svg.removeEventListener('mousemove', this.onResizeHandleMouseMove);
|
|
279
|
+
svg.removeEventListener('mouseup', this.onResizeHandleMouseUp);
|
|
291
280
|
}
|
|
292
|
-
this.selectedShape = null;
|
|
293
281
|
};
|
|
294
282
|
this.onFocus = () => {
|
|
295
283
|
this.addEventListener('keydown', this.handleKeyDown);
|
|
@@ -320,11 +308,11 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
320
308
|
}
|
|
321
309
|
|
|
322
310
|
svg {
|
|
323
|
-
cursor:
|
|
311
|
+
cursor: default;
|
|
324
312
|
}
|
|
325
313
|
|
|
326
|
-
svg
|
|
327
|
-
cursor:
|
|
314
|
+
svg[drawing] {
|
|
315
|
+
cursor: crosshair;
|
|
328
316
|
}
|
|
329
317
|
|
|
330
318
|
.resize-handle {
|
|
@@ -352,6 +340,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
352
340
|
@wheel=${this.onSvgWheel}
|
|
353
341
|
@dblclick=${this.onSvgDoubleClick}
|
|
354
342
|
viewBox=${this.viewBox}
|
|
343
|
+
?drawing=${this.currentMode == 'shape'}
|
|
355
344
|
>
|
|
356
345
|
<image href=${this.imageUrl} @load=${this.onImageLoad}></image>
|
|
357
346
|
${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}
|
|
@@ -379,16 +368,13 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
379
368
|
}
|
|
380
369
|
onSvgMouseDown(event) {
|
|
381
370
|
event.preventDefault();
|
|
382
|
-
this.
|
|
383
|
-
this.
|
|
384
|
-
return { ...s, selected: false };
|
|
385
|
-
});
|
|
386
|
-
if (this.currentMode === 'move') {
|
|
387
|
-
this.startPanning(event);
|
|
388
|
-
}
|
|
389
|
-
else if (this.currentMode === 'draw') {
|
|
371
|
+
this.setSelectedShape(null);
|
|
372
|
+
if (this.currentMode === 'shape') {
|
|
390
373
|
this.startDrawing(event);
|
|
391
374
|
}
|
|
375
|
+
else {
|
|
376
|
+
this.startPanning(event);
|
|
377
|
+
}
|
|
392
378
|
}
|
|
393
379
|
startDrawing(event) {
|
|
394
380
|
const { x, y } = this.getSvgPoint(event);
|
|
@@ -408,18 +394,32 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
408
394
|
this.drawing = true;
|
|
409
395
|
}
|
|
410
396
|
if ('touches' in event) {
|
|
411
|
-
this.svg.addEventListener('touchmove', this.
|
|
412
|
-
this.svg.addEventListener('touchend', this.
|
|
397
|
+
this.svg.addEventListener('touchmove', this.onMouseMoveForDrawing);
|
|
398
|
+
this.svg.addEventListener('touchend', this.onMouseUpForDrawing);
|
|
413
399
|
}
|
|
414
400
|
else {
|
|
415
|
-
this.svg.addEventListener('mousemove', this.
|
|
416
|
-
this.svg.addEventListener('mouseup', this.
|
|
401
|
+
this.svg.addEventListener('mousemove', this.onMouseMoveForDrawing);
|
|
402
|
+
this.svg.addEventListener('mouseup', this.onMouseUpForDrawing);
|
|
417
403
|
}
|
|
418
404
|
}
|
|
419
405
|
setMode(mode, shapeType) {
|
|
406
|
+
if (mode == 'view') {
|
|
407
|
+
this.setSelectedShape(null);
|
|
408
|
+
}
|
|
420
409
|
this.currentMode = mode;
|
|
421
410
|
this.currentShapeType = shapeType;
|
|
422
411
|
}
|
|
412
|
+
setSelectedShape(shape) {
|
|
413
|
+
this.selectedShape = shape;
|
|
414
|
+
if (!shape) {
|
|
415
|
+
this.shapes = this.shapes.map(s => {
|
|
416
|
+
return { ...s, selected: false };
|
|
417
|
+
});
|
|
418
|
+
}
|
|
419
|
+
else {
|
|
420
|
+
this.selectedShape.selected = true;
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
423
|
getSvgPoint(event) {
|
|
424
424
|
const { x, y } = this.getPointFromEvent(event);
|
|
425
425
|
const svg = this.svg;
|
|
@@ -444,8 +444,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
444
444
|
y="${shape.y}"
|
|
445
445
|
fill="${commonAttrs.stroke}"
|
|
446
446
|
style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
|
|
447
|
-
@mousedown="${(e) => this.
|
|
448
|
-
@touchstart="${(e) => this.
|
|
447
|
+
@mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
448
|
+
@touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
449
449
|
@dblclick="${(e) => this.onTextDoubleClick(e, shape)}"
|
|
450
450
|
>${shape.text}</text>
|
|
451
451
|
`;
|
|
@@ -460,8 +460,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
460
460
|
stroke-width="${commonAttrs['stroke-width']}"
|
|
461
461
|
fill="${commonAttrs.fill}"
|
|
462
462
|
style="cursor: ${commonAttrs.cursor}"
|
|
463
|
-
@mousedown="${(e) => this.
|
|
464
|
-
@touchstart="${(e) => this.
|
|
463
|
+
@mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
464
|
+
@touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
465
465
|
></rect>
|
|
466
466
|
${shape.selected ? this.renderResizeHandles(shape) : ''}
|
|
467
467
|
`;
|
|
@@ -475,8 +475,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
475
475
|
stroke-width="${commonAttrs['stroke-width']}"
|
|
476
476
|
fill="${commonAttrs.fill}"
|
|
477
477
|
style="cursor: ${commonAttrs.cursor}"
|
|
478
|
-
@mousedown="${(e) => this.
|
|
479
|
-
@touchstart="${(e) => this.
|
|
478
|
+
@mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
479
|
+
@touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
480
480
|
></circle>
|
|
481
481
|
${shape.selected ? this.renderResizeHandles(shape) : ''}
|
|
482
482
|
`;
|
|
@@ -488,8 +488,8 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
488
488
|
stroke-width="${commonAttrs['stroke-width']}"
|
|
489
489
|
fill="${commonAttrs.fill}"
|
|
490
490
|
style="cursor: ${commonAttrs.cursor}"
|
|
491
|
-
@mousedown="${(e) => this.
|
|
492
|
-
@touchstart="${(e) => this.
|
|
491
|
+
@mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
492
|
+
@touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
493
493
|
></polygon>
|
|
494
494
|
${shape.selected ? this.renderResizeHandles(shape) : ''}
|
|
495
495
|
`;
|
|
@@ -503,8 +503,20 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
503
503
|
stroke="${commonAttrs.stroke}"
|
|
504
504
|
stroke-width="${commonAttrs['stroke-width']}"
|
|
505
505
|
style="cursor: ${commonAttrs.cursor}"
|
|
506
|
-
|
|
507
|
-
|
|
506
|
+
></line>
|
|
507
|
+
<line
|
|
508
|
+
x1="${shape.x1}"
|
|
509
|
+
y1="${shape.y1}"
|
|
510
|
+
x2="${shape.x2 ?? shape.x1}"
|
|
511
|
+
y2="${shape.y2 ?? shape.y1}"
|
|
512
|
+
stroke="${commonAttrs.stroke}"
|
|
513
|
+
stroke-width="25"
|
|
514
|
+
stroke-opacity="0"
|
|
515
|
+
pointer-events="stroke"
|
|
516
|
+
@mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
517
|
+
@touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
518
|
+
@mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
|
|
519
|
+
@mouseleave="${() => (this.svg.style.cursor = 'default')}"
|
|
508
520
|
></line>
|
|
509
521
|
${shape.selected ? this.renderResizeHandles(shape) : ''}
|
|
510
522
|
`;
|
|
@@ -524,8 +536,20 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
524
536
|
stroke-width="${commonAttrs['stroke-width']}"
|
|
525
537
|
marker-end="url(#arrowhead-${shape.id})"
|
|
526
538
|
style="cursor: ${commonAttrs.cursor}"
|
|
527
|
-
|
|
528
|
-
|
|
539
|
+
></line>
|
|
540
|
+
<line
|
|
541
|
+
x1="${shape.x1}"
|
|
542
|
+
y1="${shape.y1}"
|
|
543
|
+
x2="${shape.x2 ?? shape.x1}"
|
|
544
|
+
y2="${shape.y2 ?? shape.y1}"
|
|
545
|
+
stroke="${commonAttrs.stroke}"
|
|
546
|
+
stroke-width="25"
|
|
547
|
+
stroke-opacity="0"
|
|
548
|
+
pointer-events="stroke"
|
|
549
|
+
@mousedown="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
550
|
+
@touchstart="${(e) => this.onMouseDownOnShape(e, shape)}"
|
|
551
|
+
@mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
|
|
552
|
+
@mouseleave="${() => (this.svg.style.cursor = 'default')}"
|
|
529
553
|
></line>
|
|
530
554
|
${shape.selected ? this.renderResizeHandles(shape) : ''}
|
|
531
555
|
`;
|
|
@@ -533,14 +557,17 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
533
557
|
return nothing;
|
|
534
558
|
}
|
|
535
559
|
}
|
|
536
|
-
|
|
560
|
+
onMouseDownOnShape(event, shape) {
|
|
561
|
+
if (this.currentMode !== 'edit') {
|
|
562
|
+
return;
|
|
563
|
+
}
|
|
537
564
|
event.stopPropagation();
|
|
538
565
|
event.preventDefault();
|
|
539
566
|
this.shapes = this.shapes.map(s => ({
|
|
540
567
|
...s,
|
|
541
568
|
selected: s.id === shape.id
|
|
542
569
|
}));
|
|
543
|
-
this.
|
|
570
|
+
this.setSelectedShape(this.shapes.find(s => s.id == shape.id));
|
|
544
571
|
const { x, y } = this.getSvgPoint(event);
|
|
545
572
|
switch (shape.type) {
|
|
546
573
|
case 'text':
|
|
@@ -563,12 +590,12 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
563
590
|
}
|
|
564
591
|
const svg = this.svg;
|
|
565
592
|
if ('touches' in event) {
|
|
566
|
-
svg.addEventListener('touchmove', this.
|
|
567
|
-
svg.addEventListener('touchend', this.
|
|
593
|
+
svg.addEventListener('touchmove', this.onMouseMoveOnShape);
|
|
594
|
+
svg.addEventListener('touchend', this.onMouseUpOnShape);
|
|
568
595
|
}
|
|
569
596
|
else {
|
|
570
|
-
svg.addEventListener('mousemove', this.
|
|
571
|
-
svg.addEventListener('mouseup', this.
|
|
597
|
+
svg.addEventListener('mousemove', this.onMouseMoveOnShape);
|
|
598
|
+
svg.addEventListener('mouseup', this.onMouseUpOnShape);
|
|
572
599
|
}
|
|
573
600
|
}
|
|
574
601
|
renderResizeHandles(shape) {
|
|
@@ -618,27 +645,27 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
618
645
|
stroke="black"
|
|
619
646
|
class="resize-handle"
|
|
620
647
|
style="cursor: ${handle.cursor};"
|
|
621
|
-
@mousedown="${(e) => this.
|
|
622
|
-
@touchstart="${(e) => this.
|
|
648
|
+
@mousedown="${(e) => this.onResizeHandleMouseDown(e, shape, handle)}"
|
|
649
|
+
@touchstart="${(e) => this.onResizeHandleMouseDown(e, shape, handle)}"
|
|
623
650
|
></rect>
|
|
624
651
|
</g>
|
|
625
652
|
`)}
|
|
626
653
|
`;
|
|
627
654
|
}
|
|
628
|
-
|
|
655
|
+
onResizeHandleMouseDown(event, shape, handle) {
|
|
629
656
|
event.stopPropagation();
|
|
630
657
|
event.preventDefault();
|
|
631
|
-
this.
|
|
658
|
+
this.setSelectedShape(shape);
|
|
632
659
|
this.offsetX = handle.x;
|
|
633
660
|
this.offsetY = handle.y;
|
|
634
661
|
const svg = this.svg;
|
|
635
662
|
if ('touches' in event) {
|
|
636
|
-
svg.addEventListener('touchmove', this.
|
|
637
|
-
svg.addEventListener('touchend', this.
|
|
663
|
+
svg.addEventListener('touchmove', this.onResizeHandleMouseMove);
|
|
664
|
+
svg.addEventListener('touchend', this.onResizeHandleMouseUp);
|
|
638
665
|
}
|
|
639
666
|
else {
|
|
640
|
-
svg.addEventListener('mousemove', this.
|
|
641
|
-
svg.addEventListener('mouseup', this.
|
|
667
|
+
svg.addEventListener('mousemove', this.onResizeHandleMouseMove);
|
|
668
|
+
svg.addEventListener('mouseup', this.onResizeHandleMouseUp);
|
|
642
669
|
}
|
|
643
670
|
}
|
|
644
671
|
onTextDoubleClick(event, shape) {
|
|
@@ -750,7 +777,7 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
|
|
|
750
777
|
deleteSelectedShape() {
|
|
751
778
|
if (this.selectedShape) {
|
|
752
779
|
this.shapes = this.shapes.filter(s => s.id !== this.selectedShape.id);
|
|
753
|
-
this.
|
|
780
|
+
this.setSelectedShape(null);
|
|
754
781
|
this.requestUpdate();
|
|
755
782
|
}
|
|
756
783
|
}
|
|
@@ -764,6 +791,9 @@ __decorate([
|
|
|
764
791
|
__decorate([
|
|
765
792
|
state()
|
|
766
793
|
], OxImageMarker.prototype, "selectedShape", void 0);
|
|
794
|
+
__decorate([
|
|
795
|
+
query('ox-image-marker-mode')
|
|
796
|
+
], OxImageMarker.prototype, "imageMarkerMode", void 0);
|
|
767
797
|
OxImageMarker = __decorate([
|
|
768
798
|
customElement('ox-image-marker')
|
|
769
799
|
], OxImageMarker);
|