Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
pannable.js
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
99
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
›
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import { spring } from 'svelte/motion';
import { pannable } from './pannable.js';
const coords = spring(
{ x: 0, y: 0 },
{
stiffness: 0.2,
damping: 0.4
}
);
function handlePanStart() {
coords.stiffness = coords.damping = 1;
}
function handlePanMove(event) {
coords.update(($coords) => ({
x: $coords.x + event.detail.dx,
y: $coords.y + event.detail.dy
}));
}
function handlePanEnd(event) {
coords.stiffness = 0.2;
coords.damping = 0.4;
coords.set({ x: 0, y: 0 });
}
</script>
<div
class="box"
use:pannable
onpanstart={handlePanStart}
onpanmove={handlePanMove}
onpanend={handlePanEnd}
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
99
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
›
⌄
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import { spring } from 'svelte/motion';
import { pannable } from './pannable.js';
var root = $.template(`<div class="box svelte-12w0hh3"></div>`);
export default function App($$anchor, $$props) {
$.push($$props, false);
const [$$stores, $$cleanup] = $.setup_stores();
const $coords = () => $.store_get(coords, '$coords', $$stores);
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });
function handlePanStart() {
coords.stiffness = coords.damping = 1;
}
function handlePanMove(event) {
coords.update(($coords) => ({
x: $coords.x + event.detail.dx,
y: $coords.y + event.detail.dy
}));
}
function handlePanEnd(event) {
coords.stiffness = 0.2;
coords.damping = 0.4;
coords.set({ x: 0, y: 0 });
}
$.init();
var div = root();
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
›
.box.svelte-12w0hh3 {
--width: 100px;
--height: 100px;
position: absolute;
width: var(--width);
height: var(--height);
left: calc(50% - var(--width) / 2);
top: calc(50% - var(--height) / 2);
border-radius: 4px;
background-color: #ff3e00;
cursor: move;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 743
- end: 1020
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 752
- end: 756
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 752
- end: 756
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "box"
- start: 752
- end: 756
}
]- start: 752
- end: 756
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 757
- end: 1011
children: [...] (10)
Declaration {...}
- type: "Declaration"
- start: 761
- end: 775
- property: "--width"
- value: "100px"
} Declaration {...}
- type: "Declaration"
- start: 779
- end: 794
- property: "--height"
- value: "100px"
} Declaration {...}
- type: "Declaration"
- start: 798
- end: 816
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 820
- end: 839
- property: "width"
- value: "var(--width)"
} Declaration {...}
- type: "Declaration"
- start: 843
- end: 864
- property: "height"
- value: "var(--height)"
} Declaration {...}
- type: "Declaration"
- start: 868
- end: 902
- property: "left"
- value: "calc(50% - var(--width) / 2)"
} Declaration {...}
- type: "Declaration"
- start: 906
- end: 940
- property: "top"
- value: "calc(50% - var(--height) / 2)"
} Declaration {...}
- type: "Declaration"
- start: 944
- end: 962
- property: "border-radius"
- value: "4px"
} Declaration {...}
- type: "Declaration"
- start: 966
- end: 991
- property: "background-color"
- value: "#ff3e00"
} Declaration {...}
- type: "Declaration"
- start: 995
- end: 1007
- property: "cursor"
- value: "move"
}
]
}- start: 752
- end: 1011
}
]content: {...}
- start: 750
- end: 1012
- styles: "\n\t.box {\n\t\t--width: 100px;\n\t\t--height: 100px;\n\t\tposition: absolute;\n\t\twidth: var(--width);\n\t\theight: var(--height);\n\t\tleft: calc(50% - var(--width) / 2);\n\t\ttop: calc(50% - var(--height) / 2);\n\t\tborder-radius: 4px;\n\t\tbackground-color: #ff3e00;\n\t\tcursor: move;\n\t}\n"
- comment: null
}
}- js: []
- start: 529
- end: 741
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 527
- end: 529
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 529
- end: 741
- name: "div"
attributes: [...] (6)
Attribute {...}
- type: "Attribute"
- start: 535
- end: 546
- name: "class"
value: [...] (1)
Text {...}
- start: 542
- end: 545
- type: "Text"
- raw: "box"
- data: "box svelte-12w0hh3"
}
]
} UseDirective {...}
- start: 548
- end: 560
- type: "UseDirective"
- name: "pannable"
- expression: null
- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 562
- end: 589
- name: "onpanstart"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 573
- end: 589
expression: Identifier {...}
- type: "Identifier"
- start: 574
- end: 588
loc: {...}
start: {...}
- line: 34
- column: 13
}end: {...}
- line: 34
- column: 27
}
}- name: "handlePanStart"
}
}
} Attribute {...}
- type: "Attribute"
- start: 591
- end: 616
- name: "onpanmove"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 601
- end: 616
expression: Identifier {...}
- type: "Identifier"
- start: 602
- end: 615
loc: {...}
start: {...}
- line: 35
- column: 12
}end: {...}
- line: 35
- column: 25
}
}- name: "handlePanMove"
}
}
} Attribute {...}
- type: "Attribute"
- start: 618
- end: 641
- name: "onpanend"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 627
- end: 641
expression: Identifier {...}
- type: "Identifier"
- start: 628
- end: 640
loc: {...}
start: {...}
- line: 36
- column: 11
}end: {...}
- line: 36
- column: 23
}
}- name: "handlePanEnd"
}
}
} Attribute {...}
- type: "Attribute"
- start: 643
- end: 733
- name: "style"
value: [...] (7)
Text {...}
- start: 650
- end: 673
- type: "Text"
- raw: "transform:\n\t\ttranslate("
- data: "transform:\n\t\ttranslate("
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 673
- end: 684
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 674
- end: 683
loc: {...}
start: {...}
- line: 38
- column: 13
}end: {...}
- line: 38
- column: 22
}
}object: Identifier {...}
- type: "Identifier"
- start: 674
- end: 681
loc: {...}
start: {...}
- line: 38
- column: 13
}end: {...}
- line: 38
- column: 20
}
}- name: "$coords"
}property: Identifier {...}
- type: "Identifier"
- start: 682
- end: 683
loc: {...}
start: {...}
- line: 38
- column: 21
}end: {...}
- line: 38
- column: 22
}
}- name: "x"
}- computed: false
- optional: false
}
} Text {...}
- start: 684
- end: 687
- type: "Text"
- raw: "px,"
- data: "px,"
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 687
- end: 698
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 688
- end: 697
loc: {...}
start: {...}
- line: 38
- column: 27
}end: {...}
- line: 38
- column: 36
}
}object: Identifier {...}
- type: "Identifier"
- start: 688
- end: 695
loc: {...}
start: {...}
- line: 38
- column: 27
}end: {...}
- line: 38
- column: 34
}
}- name: "$coords"
}property: Identifier {...}
- type: "Identifier"
- start: 696
- end: 697
loc: {...}
start: {...}
- line: 38
- column: 35
}end: {...}
- line: 38
- column: 36
}
}- name: "y"
}- computed: false
- optional: false
}
} Text {...}
- start: 698
- end: 711
- type: "Text"
- raw: "px)\n\t\trotate("
- data: "px)\n\t\trotate("
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 711
- end: 728
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 712
- end: 727
loc: {...}
start: {...}
- line: 39
- column: 10
}end: {...}
- line: 39
- column: 25
}
}left: MemberExpression {...}
- type: "MemberExpression"
- start: 712
- end: 721
loc: {...}
start: {...}
- line: 39
- column: 10
}end: {...}
- line: 39
- column: 19
}
}object: Identifier {...}
- type: "Identifier"
- start: 712
- end: 719
loc: {...}
start: {...}
- line: 39
- column: 10
}end: {...}
- line: 39
- column: 17
}
}- name: "$coords"
}property: Identifier {...}
- type: "Identifier"
- start: 720
- end: 721
loc: {...}
start: {...}
- line: 39
- column: 18
}end: {...}
- line: 39
- column: 19
}
}- name: "x"
}- computed: false
- optional: false
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 724
- end: 727
loc: {...}
start: {...}
- line: 39
- column: 22
}end: {...}
- line: 39
- column: 25
}
}- value: 0.2
- raw: "0.2"
}
}
} Text {...}
- start: 728
- end: 732
- type: "Text"
- raw: "deg)"
- data: "deg)"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 741
- end: 743
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 527
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 518
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 29
- column: 0
}
}body: [...] (6)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 49
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 40
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 16
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 16
}
}- name: "spring"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 16
}
}- name: "spring"
}
}
]source: Literal {...}
- type: "Literal"
- start: 33
- end: 48
loc: {...}
start: {...}
- line: 2
- column: 24
}end: {...}
- line: 2
- column: 39
}
}- value: "svelte/motion"
- raw: "'svelte/motion'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 51
- end: 92
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 42
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 60
- end: 68
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 18
}
}imported: Identifier {...}
- type: "Identifier"
- start: 60
- end: 68
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 18
}
}- name: "pannable"
}local: Identifier {...}
- type: "Identifier"
- start: 60
- end: 68
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 18
}
}- name: "pannable"
}
}
]source: Literal {...}
- type: "Literal"
- start: 76
- end: 91
loc: {...}
start: {...}
- line: 3
- column: 26
}end: {...}
- line: 3
- column: 41
}
}- value: "./pannable.js"
- raw: "'./pannable.js'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 95
- end: 182
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 11
- column: 3
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 101
- end: 181
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 11
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 101
- end: 107
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 5
- column: 13
}
}- name: "coords"
}init: CallExpression {...}
- type: "CallExpression"
- start: 110
- end: 181
loc: {...}
start: {...}
- line: 5
- column: 16
}end: {...}
- line: 11
- column: 2
}
}callee: Identifier {...}
- type: "Identifier"
- start: 110
- end: 116
loc: {...}
start: {...}
- line: 5
- column: 16
}end: {...}
- line: 5
- column: 22
}
}- name: "spring"
}arguments: [...] (2)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 120
- end: 134
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 16
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 122
- end: 126
loc: {...}
start: {...}
- line: 6
- column: 4
}end: {...}
- line: 6
- column: 8
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 122
- end: 123
loc: {...}
start: {...}
- line: 6
- column: 4
}end: {...}
- line: 6
- column: 5
}
}- name: "x"
}value: Literal {...}
- type: "Literal"
- start: 125
- end: 126
loc: {...}
start: {...}
- line: 6
- column: 7
}end: {...}
- line: 6
- column: 8
}
}- value: 0
- raw: "0"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 128
- end: 132
loc: {...}
start: {...}
- line: 6
- column: 10
}end: {...}
- line: 6
- column: 14
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 128
- end: 129
loc: {...}
start: {...}
- line: 6
- column: 10
}end: {...}
- line: 6
- column: 11
}
}- name: "y"
}value: Literal {...}
- type: "Literal"
- start: 131
- end: 132
loc: {...}
start: {...}
- line: 6
- column: 13
}end: {...}
- line: 6
- column: 14
}
}- value: 0
- raw: "0"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 138
- end: 178
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 10
- column: 3
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 143
- end: 157
loc: {...}
start: {...}
- line: 8
- column: 3
}end: {...}
- line: 8
- column: 17
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 143
- end: 152
loc: {...}
start: {...}
- line: 8
- column: 3
}end: {...}
- line: 8
- column: 12
}
}- name: "stiffness"
}value: Literal {...}
- type: "Literal"
- start: 154
- end: 157
loc: {...}
start: {...}
- line: 8
- column: 14
}end: {...}
- line: 8
- column: 17
}
}- value: 0.2
- raw: "0.2"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 162
- end: 174
loc: {...}
start: {...}
- line: 9
- column: 3
}end: {...}
- line: 9
- column: 15
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 162
- end: 169
loc: {...}
start: {...}
- line: 9
- column: 3
}end: {...}
- line: 9
- column: 10
}
}- name: "damping"
}value: Literal {...}
- type: "Literal"
- start: 171
- end: 174
loc: {...}
start: {...}
- line: 9
- column: 12
}end: {...}
- line: 9
- column: 15
}
}- value: 0.4
- raw: "0.4"
}- kind: "init"
}
]
}
]- optional: false
}
}
]- kind: "const"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 185
- end: 256
loc: {...}
start: {...}
- line: 13
- column: 1
}end: {...}
- line: 15
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 194
- end: 208
loc: {...}
start: {...}
- line: 13
- column: 10
}end: {...}
- line: 13
- column: 24
}
}- name: "handlePanStart"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 211
- end: 256
loc: {...}
start: {...}
- line: 13
- column: 27
}end: {...}
- line: 15
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 215
- end: 253
loc: {...}
start: {...}
- line: 14
- column: 2
}end: {...}
- line: 14
- column: 40
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 215
- end: 252
loc: {...}
start: {...}
- line: 14
- column: 2
}end: {...}
- line: 14
- column: 39
}
}- operator: "="
left: MemberExpression {...}
- type: "MemberExpression"
- start: 215
- end: 231
loc: {...}
start: {...}
- line: 14
- column: 2
}end: {...}
- line: 14
- column: 18
}
}object: Identifier {...}
- type: "Identifier"
- start: 215
- end: 221
loc: {...}
start: {...}
- line: 14
- column: 2
}end: {...}
- line: 14
- column: 8
}
}- name: "coords"
}property: Identifier {...}
- type: "Identifier"
- start: 222
- end: 231
loc: {...}
start: {...}
- line: 14
- column: 9
}end: {...}
- line: 14
- column: 18
}
}- name: "stiffness"
}- computed: false
- optional: false
}right: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 234
- end: 252
loc: {...}
start: {...}
- line: 14
- column: 21
}end: {...}
- line: 14
- column: 39
}
}- operator: "="
left: MemberExpression {...}
- type: "MemberExpression"
- start: 234
- end: 248
loc: {...}
start: {...}
- line: 14
- column: 21
}end: {...}
- line: 14
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 234
- end: 240
loc: {...}
start: {...}
- line: 14
- column: 21
}end: {...}
- line: 14
- column: 27
}
}- name: "coords"
}property: Identifier {...}
- type: "Identifier"
- start: 241
- end: 248
loc: {...}
start: {...}
- line: 14
- column: 28
}end: {...}
- line: 14
- column: 35
}
}- name: "damping"
}- computed: false
- optional: false
}right: Literal {...}
- type: "Literal"
- start: 251
- end: 252
loc: {...}
start: {...}
- line: 14
- column: 38
}end: {...}
- line: 14
- column: 39
}
}- value: 1
- raw: "1"
}
}
}
}
]
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 259
- end: 401
loc: {...}
start: {...}
- line: 17
- column: 1
}end: {...}
- line: 22
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 268
- end: 281
loc: {...}
start: {...}
- line: 17
- column: 10
}end: {...}
- line: 17
- column: 23
}
}- name: "handlePanMove"
}- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 282
- end: 287
loc: {...}
start: {...}
- line: 17
- column: 24
}end: {...}
- line: 17
- column: 29
}
}- name: "event"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 289
- end: 401
loc: {...}
start: {...}
- line: 17
- column: 31
}end: {...}
- line: 22
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 293
- end: 398
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 21
- column: 6
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 293
- end: 397
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 21
- column: 5
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 293
- end: 306
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 15
}
}object: Identifier {...}
- type: "Identifier"
- start: 293
- end: 299
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 8
}
}- name: "coords"
}property: Identifier {...}
- type: "Identifier"
- start: 300
- end: 306
loc: {...}
start: {...}
- line: 18
- column: 9
}end: {...}
- line: 18
- column: 15
}
}- name: "update"
}- computed: false
- optional: false
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 307
- end: 396
loc: {...}
start: {...}
- line: 18
- column: 16
}end: {...}
- line: 21
- column: 4
}
}- id: null
- expression: true
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 308
- end: 315
loc: {...}
start: {...}
- line: 18
- column: 17
}end: {...}
- line: 18
- column: 24
}
}- name: "$coords"
}
]body: ObjectExpression {...}
- type: "ObjectExpression"
- start: 321
- end: 395
loc: {...}
start: {...}
- line: 18
- column: 30
}end: {...}
- line: 21
- column: 3
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 326
- end: 356
loc: {...}
start: {...}
- line: 19
- column: 3
}end: {...}
- line: 19
- column: 33
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 326
- end: 327
loc: {...}
start: {...}
- line: 19
- column: 3
}end: {...}
- line: 19
- column: 4
}
}- name: "x"
}value: BinaryExpression {...}
- type: "BinaryExpression"
- start: 329
- end: 356
loc: {...}
start: {...}
- line: 19
- column: 6
}end: {...}
- line: 19
- column: 33
}
}left: MemberExpression {...}
- type: "MemberExpression"
- start: 329
- end: 338
loc: {...}
start: {...}
- line: 19
- column: 6
}end: {...}
- line: 19
- column: 15
}
}object: Identifier {...}
- type: "Identifier"
- start: 329
- end: 336
loc: {...}
start: {...}
- line: 19
- column: 6
}end: {...}
- line: 19
- column: 13
}
}- name: "$coords"
}property: Identifier {...}
- type: "Identifier"
- start: 337
- end: 338
loc: {...}
start: {...}
- line: 19
- column: 14
}end: {...}
- line: 19
- column: 15
}
}- name: "x"
}- computed: false
- optional: false
}- operator: "+"
right: MemberExpression {...}
- type: "MemberExpression"
- start: 341
- end: 356
loc: {...}
start: {...}
- line: 19
- column: 18
}end: {...}
- line: 19
- column: 33
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 341
- end: 353
loc: {...}
start: {...}
- line: 19
- column: 18
}end: {...}
- line: 19
- column: 30
}
}object: Identifier {...}
- type: "Identifier"
- start: 341
- end: 346
loc: {...}
start: {...}
- line: 19
- column: 18
}end: {...}
- line: 19
- column: 23
}
}- name: "event"
}property: Identifier {...}
- type: "Identifier"
- start: 347
- end: 353
loc: {...}
start: {...}
- line: 19
- column: 24
}end: {...}
- line: 19
- column: 30
}
}- name: "detail"
}- computed: false
- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 354
- end: 356
loc: {...}
start: {...}
- line: 19
- column: 31
}end: {...}
- line: 19
- column: 33
}
}- name: "dx"
}- computed: false
- optional: false
}
}- kind: "init"
} Property {...}
- type: "Property"
- start: 361
- end: 391
loc: {...}
start: {...}
- line: 20
- column: 3
}end: {...}
- line: 20
- column: 33
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 361
- end: 362
loc: {...}
start: {...}
- line: 20
- column: 3
}end: {...}
- line: 20
- column: 4
}
}- name: "y"
}value: BinaryExpression {...}
- type: "BinaryExpression"
- start: 364
- end: 391
loc: {...}
start: {...}
- line: 20
- column: 6
}end: {...}
- line: 20
- column: 33
}
}left: MemberExpression {...}
- type: "MemberExpression"
- start: 364
- end: 373
loc: {...}
start: {...}
- line: 20
- column: 6
}end: {...}
- line: 20
- column: 15
}
}object: Identifier {...}
- type: "Identifier"
- start: 364
- end: 371
loc: {...}
start: {...}
- line: 20
- column: 6
}end: {...}
- line: 20
- column: 13
}
}- name: "$coords"
}property: Identifier {...}
- type: "Identifier"
- start: 372
- end: 373
loc: {...}
start: {...}
- line: 20
- column: 14
}end: {...}
- line: 20
- column: 15
}
}- name: "y"
}- computed: false
- optional: false
}- operator: "+"
right: MemberExpression {...}
- type: "MemberExpression"
- start: 376
- end: 391
loc: {...}
start: {...}
- line: 20
- column: 18
}end: {...}
- line: 20
- column: 33
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 376
- end: 388
loc: {...}
start: {...}
- line: 20
- column: 18
}end: {...}
- line: 20
- column: 30
}
}object: Identifier {...}
- type: "Identifier"
- start: 376
- end: 381
loc: {...}
start: {...}
- line: 20
- column: 18
}end: {...}
- line: 20
- column: 23
}
}- name: "event"
}property: Identifier {...}
- type: "Identifier"
- start: 382
- end: 388
loc: {...}
start: {...}
- line: 20
- column: 24
}end: {...}
- line: 20
- column: 30
}
}- name: "detail"
}- computed: false
- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 389
- end: 391
loc: {...}
start: {...}
- line: 20
- column: 31
}end: {...}
- line: 20
- column: 33
}
}- name: "dy"
}- computed: false
- optional: false
}
}- kind: "init"
}
]
}
}
]- optional: false
}
}
]
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 404
- end: 517
loc: {...}
start: {...}
- line: 24
- column: 1
}end: {...}
- line: 28
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 413
- end: 425
loc: {...}
start: {...}
- line: 24
- column: 10
}end: {...}
- line: 24
- column: 22
}
}- name: "handlePanEnd"
}- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 426
- end: 431
loc: {...}
start: {...}
- line: 24
- column: 23
}end: {...}
- line: 24
- column: 28
}
}- name: "event"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 433
- end: 517
loc: {...}
start: {...}
- line: 24
- column: 30
}end: {...}
- line: 28
- column: 2
}
}body: [...] (3)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 437
- end: 460
loc: {...}
start: {...}
- line: 25
- column: 2
}end: {...}
- line: 25
- column: 25
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 437
- end: 459
loc: {...}
start: {...}
- line: 25
- column: 2
}end: {...}
- line: 25
- column: 24
}
}- operator: "="
left: MemberExpression {...}
- type: "MemberExpression"
- start: 437
- end: 453
loc: {...}
start: {...}
- line: 25
- column: 2
}end: {...}
- line: 25
- column: 18
}
}object: Identifier {...}
- type: "Identifier"
- start: 437
- end: 443
loc: {...}
start: {...}
- line: 25
- column: 2
}end: {...}
- line: 25
- column: 8
}
}- name: "coords"
}property: Identifier {...}
- type: "Identifier"
- start: 444
- end: 453
loc: {...}
start: {...}
- line: 25
- column: 9
}end: {...}
- line: 25
- column: 18
}
}- name: "stiffness"
}- computed: false
- optional: false
}right: Literal {...}
- type: "Literal"
- start: 456
- end: 459
loc: {...}
start: {...}
- line: 25
- column: 21
}end: {...}
- line: 25
- column: 24
}
}- value: 0.2
- raw: "0.2"
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 463
- end: 484
loc: {...}
start: {...}
- line: 26
- column: 2
}end: {...}
- line: 26
- column: 23
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 463
- end: 483
loc: {...}
start: {...}
- line: 26
- column: 2
}end: {...}
- line: 26
- column: 22
}
}- operator: "="
left: MemberExpression {...}
- type: "MemberExpression"
- start: 463
- end: 477
loc: {...}
start: {...}
- line: 26
- column: 2
}end: {...}
- line: 26
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 463
- end: 469
loc: {...}
start: {...}
- line: 26
- column: 2
}end: {...}
- line: 26
- column: 8
}
}- name: "coords"
}property: Identifier {...}
- type: "Identifier"
- start: 470
- end: 477
loc: {...}
start: {...}
- line: 26
- column: 9
}end: {...}
- line: 26
- column: 16
}
}- name: "damping"
}- computed: false
- optional: false
}right: Literal {...}
- type: "Literal"
- start: 480
- end: 483
loc: {...}
start: {...}
- line: 26
- column: 19
}end: {...}
- line: 26
- column: 22
}
}- value: 0.4
- raw: "0.4"
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 487
- end: 514
loc: {...}
start: {...}
- line: 27
- column: 2
}end: {...}
- line: 27
- column: 29
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 487
- end: 513
loc: {...}
start: {...}
- line: 27
- column: 2
}end: {...}
- line: 27
- column: 28
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 487
- end: 497
loc: {...}
start: {...}
- line: 27
- column: 2
}end: {...}
- line: 27
- column: 12
}
}object: Identifier {...}
- type: "Identifier"
- start: 487
- end: 493
loc: {...}
start: {...}
- line: 27
- column: 2
}end: {...}
- line: 27
- column: 8
}
}- name: "coords"
}property: Identifier {...}
- type: "Identifier"
- start: 494
- end: 497
loc: {...}
start: {...}
- line: 27
- column: 9
}end: {...}
- line: 27
- column: 12
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 498
- end: 512
loc: {...}
start: {...}
- line: 27
- column: 13
}end: {...}
- line: 27
- column: 27
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 500
- end: 504
loc: {...}
start: {...}
- line: 27
- column: 15
}end: {...}
- line: 27
- column: 19
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 500
- end: 501
loc: {...}
start: {...}
- line: 27
- column: 15
}end: {...}
- line: 27
- column: 16
}
}- name: "x"
}value: Literal {...}
- type: "Literal"
- start: 503
- end: 504
loc: {...}
start: {...}
- line: 27
- column: 18
}end: {...}
- line: 27
- column: 19
}
}- value: 0
- raw: "0"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 506
- end: 510
loc: {...}
start: {...}
- line: 27
- column: 21
}end: {...}
- line: 27
- column: 25
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 506
- end: 507
loc: {...}
start: {...}
- line: 27
- column: 21
}end: {...}
- line: 27
- column: 22
}
}- name: "y"
}value: Literal {...}
- type: "Literal"
- start: 509
- end: 510
loc: {...}
start: {...}
- line: 27
- column: 24
}end: {...}
- line: 27
- column: 25
}
}- value: 0
- raw: "0"
}- kind: "init"
}
]
}
]- optional: false
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time