Skip to content

Instantly share code, notes, and snippets.

@joelhooks
Last active Apr 24, 2020
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
Machine({
initial: "idle",
context: {
x: 0,
y: 0,
dx: 0,
dy: 0,
pointerx: 0,
pointery: 0,
},
states: {
idle: {
id: "idle",
entry: assign({
pointerx: 0,
pointery: 0,
dx: 0,
dy: 0,
}),
on: {
mousedown: {
target: "dragging",
actions: assign((context, event) => {
return {
...context,
pointerx: event.clientX,
pointery: event.clientY,
}
}),
},
},
},
dragging: {
initial: "outside",
states: {
outside: {
on: {
mouseenter: "inside",
mouseup: {
target: "#idle",
},
},
},
inside: {
on: {
mouseleave: "outside",
mouseup: {
target: "#dropped",
},
},
},
},
on: {
mousemove: {
internal: true,
actions: assign((context, event) => {
return {
...context,
dx: event.clientX - context.pointerx,
dy: event.clientY - context.pointery,
}
}),
},
},
},
dropped: {
id: "dropped",
on: {
reset: "idle",
},
after: {
1000: "idle",
},
},
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment