Skip to content

Releases: emeeks/semiotic-mark

Good Night, Flubber

02 Jan 21:07
Compare
Choose a tag to compare

This version pulls out Flubber, which was a major aspect of implementing separate marks but made the semiotic-mark have a much larger footprint than it should have. At the same time, the transitions, while fun, weren't really useful, since a straight geometric shape transition would still have weird graphical effects. I'll revisit ways to transition disparate shapes in the future, if there's interest.

Features

  • Flubber was removed.
  • A simple function to compare the number of control points in a path to the number of control points in the new path determines whether or not a path is graphically transitioned
  • All <Mark> elements now have a transitionDuration property that allows you to set the timing of the duration either as a simple global number or an object that defines an optional default and then specific values for any style or attribute tags so if you wanted you shape to transition 500ms for everything but 2000ms for fill and 3000ms for stroke you would send the following:
<Mark
    ...otherProps
   transitionDuration={{ default: 500, fill: 2000, stroke: 3000 }}
/>

Whereas if you wanted to set all the transitions to 750ms you could just do this:

<Mark
    ...otherProps
   transitionDuration={750}
/>

The default duration is still 1000ms if nothing is set.
marktransitions

Fixes

  • More attributes can be used as styles than I knew so now the whitelist checks them all (hopefully) for instance, before if you sent r as a style to a <circle> (or equivalent) it wouldn't update because it expected r to only be sent as an attribute.