feat(events): add shape and keyframe events from wilderness core

README.md

@@ -5,7 +5,7 @@ This is the **next** version on Wilderness, built on top of
 
 It's pretty much there. Remaining tasks before it is released:
 
-- Timeline events
+- ~~Timeline events~~
 - ~~Testing the DOM libraries~~
 - ~~Adding code comments to the DOM libraries~~
 - Creating documentation

examples/events/src.js

@@ -1,20 +1,28 @@
 import { shape, render, timeline, play } from '../../src'
 
-const keyframe1 = { type: 'rect', width: 10, height: 10, x: 0, y: 0 }
-const keyframe2 = { type: 'rect', width: 10, height: 10, x: 90, y: 90 }
+const shape1Keyframe1 = { type: 'rect', width: 10, height: 10, x: 10, y: 45, name: 'KEYFRAME_1' }
+const shape1Keyframe2 = { type: 'rect', width: 10, height: 10, x: 40, y: 45, name: 'KEYFRAME_2' }
 
-const square = shape(keyframe1, keyframe2)
+const shape1 = shape(shape1Keyframe1, shape1Keyframe2)
 
-const playbackOptions = {
-  alternate: true,
-  duration: 2000,
-  iterations: Infinity
-}
+const shape2Keyframe1 = { type: 'rect', width: 10, height: 10, x: 50, y: 45, name: 'KEYFRAME_1' }
+const shape2Keyframe2 = { type: 'rect', width: 10, height: 10, x: 70, y: 45, name: 'KEYFRAME_2' }
 
-const animation = timeline(square, playbackOptions)
+const shape2 = shape(shape2Keyframe1, shape2Keyframe2)
+
+const playbackOptions = { alternate: true, duration: 10000, iterations: Infinity }
+
+const animation = timeline(
+  [ shape1, { name: 'SHAPE_1' } ],
+  [ shape2, { name: 'SHAPE_2' } ],
+  playbackOptions
+)
 
 animation.event.subscribe('timeline.start', () => console.log('timeline.start'))
 animation.event.subscribe('timeline.finish', () => console.log('timeline.finish'))
+animation.event.subscribe('shape.start', ({ shapeName }) => console.log(`shape.start ${shapeName}`))
+animation.event.subscribe('shape.finish', ({ shapeName }) => console.log(`shape.finish ${shapeName}`))
+animation.event.subscribe('keyframe', ({ keyframeName, shapeName }) => console.log(`keyframe ${shapeName} ${keyframeName}`))
 animation.event.subscribe('frame', () => console.log('frame'))
 
 render(document.querySelector('svg'), animation)

package.json

@@ -50,7 +50,7 @@
     }
   },
   "dependencies": {
-    "wilderness-core": "^2.1.0",
+    "wilderness-core": "^2.2.0",
     "wilderness-dom-node": "^1.2.1"
   },
   "description": "A javascript API for making SVG animations",

yarn.lock

@@ -4067,9 +4067,9 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2"
 
-wilderness-core@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/wilderness-core/-/wilderness-core-2.1.0.tgz#3f3fe49cff925acc3a95a89c22b56fd6dd819efd"
+wilderness-core@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/wilderness-core/-/wilderness-core-2.2.0.tgz#cf616e9052a234a3911ecfbec80e21bd0c4ab09a"
   dependencies:
     points "^3.1.0"
     svg-points "^6.0.0"