-
Notifications
You must be signed in to change notification settings - Fork 0
/
EllipseEditor.svelte
121 lines (98 loc) · 2.48 KB
/
EllipseEditor.svelte
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script lang="ts">
import { Editor, Handle } from '@annotorious/annotorious/src';
import type { Ellipse, Shape, Transform } from '@annotorious/annotorious';
export let shape: Ellipse;
export let transform: Transform;
export let viewportScale: number = 1;
$: geom = shape.geometry;
$: handleSize = 10 / viewportScale;
const editor = (ellipse: Shape, handle: string, delta: [number, number]) => {
const initialBounds = ellipse.geometry.bounds;
let [x0, y0] = [initialBounds.minX, initialBounds.minY];
let [x1, y1] = [initialBounds.maxX, initialBounds.maxY];
const [dx, dy] = delta;
if (handle === 'SHAPE') {
x0 += dx;
x1 += dx;
y0 += dy;
y1 += dy;
} else {
switch (handle) {
case 'TOP': {
y0 += dy;
break;
}
case 'BOTTOM': {
y1 += dy;
break;
}
case 'LEFT': {
x0 += dx;
break;
}
case 'RIGHT': {
x1 += dx;
break;
}
}
}
const x = Math.min(x0, x1);
const y = Math.min(y0, y1);
const w = Math.abs(x1 - x0);
const h = Math.abs(y1 - y0);
const cx = (x0 + x1) / 2;
const cy = (y0 + y1) / 2;
const rx = w / 2;
const ry = h / 2;
return {
...ellipse,
geometry: {
...ellipse.geometry,
cx, cy, rx, ry,
bounds: {
minX: x,
minY: y,
maxX: x + w,
maxY: y + h
}
}
};
}
</script>
<Editor
shape={shape}
transform={transform}
editor={editor}
on:grab
on:change
on:release
let:grab={grab}>
<ellipse
class="a9s-outer"
on:pointerdown={grab('SHAPE')}
cx={geom.cx} cy={geom.cy} rx={geom.rx} ry={geom.ry} />
<ellipse
class="a9s-inner a9s-shape-handle"
on:pointerdown={grab('SHAPE')}
cx={geom.cx} cy={geom.cy} rx={geom.rx} ry={geom.ry} />
<Handle
class="a9s-corner-top"
on:pointerdown={grab('TOP')}
x={geom.cx} y={geom.cy - geom.ry}
scale={viewportScale} />
<Handle
class="a9s-corner-handle-right"
on:pointerdown={grab('RIGHT')}
x={geom.cx + geom.rx} y={geom.cy}
scale={viewportScale} />
<Handle
class="a9s-corner-handle-bottom"
on:pointerdown={grab('BOTTOM')}
x={geom.cx} y={geom.cy + geom.ry}
scale={viewportScale} />
<Handle
class="a9s-corner-handle-left"
on:pointerdown={grab('LEFT')}
x={geom.cx - geom.rx} y={geom.cy}
scale={viewportScale} />
</Editor>