forked from sveltejs/language-tools
/
expectedv2.ts
90 lines (71 loc) · 2.15 KB
/
expectedv2.ts
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
///<reference types="svelte" />
;function render() {
let i = 0;
let undoStack = [[]];
let circles = [];
let selected;
let adjusting = false;
let adjusted = false;
function handleClick(event) {
if (adjusting) {
adjusting = false;
// if circle was adjusted,
// push to the stack
if (adjusted) push();
return;
}
const circle = {
cx: event.clientX,
cy: event.clientY,
r: 50
};
circles = circles.concat(circle);
selected = circle;
push();
}
function adjust(event) {
selected.r = +event.target.value;
circles = circles;
adjusted = true;
}
function select(circle, event) {
if (!adjusting) {
event.stopPropagation();
selected = circle;
}
}
function push() {
const newUndoStack = undoStack.slice(0, ++i);
newUndoStack.push(clone(circles));
undoStack = newUndoStack;
}
function travel(d) {
circles = clone(undoStack[i += d]);
adjusting = false;
}
function clone(circles) {
return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
}
;
async () => {
{ svelteHTML.createElement("div", { "class":`controls`,});
{ svelteHTML.createElement("button", { "on:click":() => travel(-1),"disabled":i === 0,}); }
{ svelteHTML.createElement("button", { "on:click":() => travel(+1),"disabled":i === undoStack.length -1,}); }
}
{ svelteHTML.createElement("svg", { "on:click":handleClick,});
for(let circle of __sveltets_2_ensureArray(circles)){
{ svelteHTML.createElement("circle", { "cx":circle.cx,"cy":circle.cy,"r":circle.r,"on:click":event => select(circle, event),"on:contextmenu":() => {
adjusting = !adjusting;
if (adjusting) selected = circle;
},"fill":circle === selected ? '#ccc': 'white',});}
}
}
if(adjusting){
{ svelteHTML.createElement("div", { "class":`adjuster`,});
{ svelteHTML.createElement("p", {}); selected.cx; selected.cy; }
{ svelteHTML.createElement("input", { "type":`range`,"value":selected.r,"on:input":adjust,});}
}
}};
return { props: {}, slots: {}, getters: {}, events: {} }}
export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {
}