Skip to content

Instantly share code, notes, and snippets.

@rjdestigter
Last active September 16, 2019 21:05
Show Gist options
  • Save rjdestigter/02da415c32b151f21555e680e8e043ec to your computer and use it in GitHub Desktop.
Save rjdestigter/02da415c32b151f21555e680e8e043ec to your computer and use it in GitHub Desktop.
Topolokus
Topolokus
Noop
addPolygonBtnClick -> AddPolygon
AddPolygon
cancelBtnClick -> Noop
escapeKeyPress -> Noop
Start
MouseOut
mouseEnter -> MouseOver
MouseOver
Pending
mouseLeave -> MouseOut
mouseDown -> Race
Race
BeforeTimeout
mouseMove -> Pending
mouseUp -> ContinueWithSecondPoint
timedout -> AfterTimeout
AfterTimeout
mouseUp -> ContinueWithSecondPoint
ContinueWithSecondPoint
DrawSecondPoint
PendingSecondPoint
mouseDown -> RaceSecondPoint
RaceSecondPoint
BeforeSeceondPointTimeout
mouseMove -> PendingSecondPoint
mouseUp -> ContinueWithThirdPoint
timedout -> AfterSecondPointTimeout
AfterSecondPointTimeout
mouseUp -> ContinueWithThirdPoint
ContinueWithThirdPoint
DrawThirdPoint
PendingThirdPoint
mouseDown -> RaceThirdPoint
RaceThirdPoint
BeforeThirdPointTimeout
mouseMove -> PendingThirdPoint
mouseUp -> ContinueWithDrawPolygon
timedout -> AfterThirdPointTimeout
AfterThirdPointTimeout
mouseUp -> ContinueWithDrawPolygon
ContinueWithDrawPolygon
DrawPoint
PendingPoint
enterKeyPress -> Noop
mouseDown -> RacePoint
RacePoint
BeforePointTimeout
mouseMove -> PendingPoint
mouseUp -> DrawPoint
timedout -> AfterPointTimeout
AfterPointTimeout
mouseUp -> DrawPoint
function render(model){
let current_state_name = model.active_states[0].name;
console.log(model)
const btnAddPolygon = $('button', {
onClick: () => model.emit('addPolygonBtnClick'),
}, 'Add Polygon')
const title = $("pre",
{style: {color: "darkBlue"}},
`The current state is: ${current_state_name}`);
const canvas = $('canvas', {
style: { width: 400, height: 250, boxShadow: '0 0 2px rgba(0,0,0,0.2)', margin: '10px 0' },
onMouseEnter: () => model.emit('mouseEnter'),
onMouseOut: () => model.emit('mouseLeave'),
onMouseDown: () => model.emit('mouseDown'),
/onMouseMove: () => model.emit('mouseMove')
})
return $('div', { style: {margin: 10 }}, [title, btnAddPolygon, $('div'), canvas])
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment