HistropediaJS v1.2.0 Released

HistropediaJS v1.2.0 is now available 😊

The latest instalment is ready for lift off, with some really cool new features and an equally exciting huge boost in performance!

Read on for a walk through some of the Histropedia v1.2.0 highlights, or see the download page for full release notes.

---

New features in HistropediaJS v1.2.0

New Timeline Redraw system

The new restructured redraw system has given HistropediaJS v1.2.0 a major
boost in performance. Our guideline for the maximum size of a single timeline was previously 10,000 events, but the new version has similar frame rates up to around 30,000!

The performance is also much more consistent across all major browsers now, with Edge and Firefox seeing the biggest improvement.

The increased timeline size is particularly important for our own work, as development is currently underway for v2.0 of our Timeline of Everything project (more updates on that coming soon…).

Timeline.requestRedraw method

To make the most of the performance enhancements in your own custom functions, always use the new Timeline.requestRedraw(redrawFunction) when redrawing the timeline. However, calling redraw functions directly still works exactly as before, so no there’s no need to switch to .requestRedraw unless you need a performance boost.

The redrawFunction parameter is optional, allowing you to specify one of the built in redraw functions or a custom redraw function of your own. If no parameter is given, .repositionRedraw is used.

The built in functions available are:

• Timeline.redraw() – The fastest but most basic timeline redraw. Its main limitation is that it can’t be used when you’ve made dynamic changes to the time range (start date and/or zoom level).
• Timeline.repositionRedraw() – Completes the same steps as the .redraw() method, but also includes repositioning of articles. This means it can be used when making dynamic changes to the time range.
• Timeline.defaultRedraw() – Completes the same steps as .repositionRedraw(), but also includes re-stacking of Event Cards on the timeline. This is called automatically when the user zooms or scrolls the timeline.

Example usage below:

// Request a basic redraw
myTimeline.requestRedraw(myTimeline.redraw)

// Request a repositionRedraw (no parameter needed)
myTimeline.requestRedraw()

// Request a defaultRedraw, which includes re-stacking of Event Cards
myTimeline.requestRedraw(myTimeline.defaultRedraw)

---

Hover Styles

You can now define a hover style which will be used when the mouse cursor is over an article on the timeline.

The new hoverStyle setting works in the same way as the existing style and activeStyle options. Set defaults in your Timeline options, or use the Article options to set styles for individual articles.

See our Article Styling example for a quick look at the new options in action.

---

Redraw Event

A new event which fires when each timeline redraw has been completed. The handler function has access to the canvas context and timeline state, which means you can use it to add custom drawings to the timeline canvas!

You can register a handler function using the onRedraw property in your Timeline options.

You can also register as many additional handlers as you like after initialisation using the .onRedraw Timeline method, e.g.

myTimeline.onRedraw(function(event) {
    console.log(event)
})

---

Pan timeline by pixels with animation

A new .goToPixelAnim Timeline methodwhich allows you to pan the timeline by a given number of pixels. This works in a similar way to the existing .goToDateAnim method, but using pixels to move instead of a target date.

A handy use for this new feature is creating next/previous arrows for easy timeline navigation:

// Right arrow click to pan forward in time by timeline width
myTimeline.goToPixelAnim(myTimeline.width)

// Left arrow click to pan backward in time by timeline width
myTimeline.goToPixelAnim(-myTimeline.width)

 

---

Shift BCE dates by +1 year

A simple but very useful addition to the Timeline options. It makes it easy to handle data that uses either the 0 = 1BCE or -1 = 1BCE conventions for specifying BCE year numbers.

This setting changes how HistropediaJS interprets all BCE input dates, including article data, timeline and article methods, or any other means of inputting dates into the library.

---

Head over to the download page for a complete list of all new features and fixes in HistropediaJS v1.2.0. The documentation page also has “new” and “changed” tags throughout to indicate the changes in the latest release.

Any questions or comments?

Use the comments section below or send an email to info@histropedia.com if you have any general comments or feedback on the new release.
Please do get in touch if you’re already using HistropediaJS or planning a new project! We’re always happy to offer help and advice on getting the most out of HistropediaJS regardless of how big or small the project is 🙂