An example Flourish template demonstrating how user interaction can affect the state
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Change circle into draggable circle Jan 16, 2017
.gitignore Ignore node_modules/ Jan 16, 2017
LICENSE Use the 3-clause BSD license Jan 16, 2017
rollup.config.js Example template Jan 12, 2017
template.yml Add autoheight setting Feb 12, 2018
thumbnail.png Example template Jan 12, 2017

Sample Flourish template: draggable circle

This sample template builds on the simple circle example, and demonstrates how user interaction can change the state. This template can be used in the Flourish Story Editor to create a story in which a circle moves about. It also demonstrates the use of the smooth-resize module to update smoothly as the window is resized.

This example demonstrates the correct way to handle user interaction in a Flourish template: user interaction should update the state, and then the update() function can be used to update the graphic from the state. Following this pattern means your templates will work as intended in the Flourish Story editor.

Use the Flourish SDK to try it out.

The main code file for the template is src/index.js.