fix(animation): Remove animation also from scene

Instead of only removing the animation from the "animation-manager", we now also remove it from the
related scene with a new action "removeAnimationFromEverywhere".

fix #85

src/actions/animation.js

@@ -0,0 +1,78 @@
+import * as constants from '../constants/index.js'
+import { getScenesWithAnimation } from '../selectors/index.js'
+import { removeAnimationFromScene } from './index.js'
+
+/*
+ * Add a animation
+ */
+export const addAnimation = animation => ({
+  animation,
+  type: constants.ADD_ANIMATION
+})
+
+/*
+ * Update a animation
+ */
+export const setAnimation = animation => ({
+  animation,
+  type: constants.SET_ANIMATION
+})
+
+/*
+ * Start the playback of a animation
+ */
+export const runAnimation = animationId => ({
+  animationId,
+  type: constants.RUN_ANIMATION
+})
+
+/*
+ * Remove an animation from the animationManager
+ */
+export const removeAnimation = animationId => ({
+  animationId,
+  type: constants.REMOVE_ANIMATION
+})
+
+/*
+ * Remove the animation from everywhere
+ */
+export const removeAnimationFromEverywhere = animationId => {
+  return (dispatch, getState) => {
+
+    const scenes = getScenesWithAnimation(getState(), { animationId })
+
+    // Remove animation from all scenes
+    scenes.map(scene => {
+      dispatch(removeAnimationFromScene(scene.id, animationId))
+    })
+
+    dispatch(removeAnimation(animationId))
+  }
+}
+
+
+/*
+ * Add a keyframe to an animation
+ */
+export const addKeyframe = (animationId, keyframeStep, keyframeProperty, keyframeValue) => ({
+  animationId,
+  keyframeStep,
+  keyframeProperty,
+  keyframeValue,
+  type: constants.ADD_KEYFRAME
+})
+
+/*
+ * Add keyframes to an animation
+ */
+export const addKeyframes = (animationId, keyframeStep, keyframeProperties) => {
+  return (dispatch, getState) => {
+    Object.entries(keyframeProperties).map(keyframeProperty => {
+      const [property, value] = keyframeProperty
+
+      dispatch(addKeyframe(animationId, keyframeStep, property, value))
+    })
+
+  }
+}

src/actions/index.js

@@ -3,6 +3,7 @@ import * as selectors from '../selectors/index.js'
 import * as utils from '../utils/index.js'
 
 export * from './timeline.js'
+export * from './animation.js'
 
 /*
  *
@@ -219,64 +220,6 @@ export const resetAllFixtures = () => {
   }
 }
 
-/*
- * Add a animation
- */
-export const addAnimation = animation => ({
-  animation,
-  type: constants.ADD_ANIMATION
-})
-
-/*
- * Update a animation
- */
-export const setAnimation = animation => ({
-  animation,
-  type: constants.SET_ANIMATION
-})
-
-/*
- * Start the playback of a animation
- */
-export const runAnimation = animationId => ({
-  animationId,
-  type: constants.RUN_ANIMATION
-})
-
-/*
- * Remove an animation
- */
-export const removeAnimation = animationId => ({
-  animationId,
-  type: constants.REMOVE_ANIMATION
-})
-
-
-/*
- * Add a keyframe to an animation
- */
-export const addKeyframe = (animationId, keyframeStep, keyframeProperty, keyframeValue) => ({
-  animationId,
-  keyframeStep,
-  keyframeProperty,
-  keyframeValue,
-  type: constants.ADD_KEYFRAME
-})
-
-/*
- * Add keyframes to an animation
- */
-export const addKeyframes = (animationId, keyframeStep, keyframeProperties) => {
-  return (dispatch, getState) => {
-    Object.entries(keyframeProperties).map(keyframeProperty => {
-      const [property, value] = keyframeProperty
-
-      dispatch(addKeyframe(animationId, keyframeStep, property, value))
-    })
-
-  }
-}
-
 /*
  * Add a fixture
  */

src/components/animation-bee/index.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit-element'
 import { store } from '../../reduxStore.js'
 import { repeat } from 'lit-html/directives/repeat.js'
-import { addKeyframe, removeAnimation, setAnimation } from '../../actions/index.js'
+import { addKeyframe, removeAnimationFromEverywhere, setAnimation } from '../../actions/index.js'
 import { FIXTURE_PROPERTIES } from '../../constants/index.js'
 import '../keyframe-grid/index.js'
 
@@ -28,7 +28,7 @@ class AnimationBee extends LitElement {
 
   removeAnimation(e) {
     const { animationId } = e.target
-    store.dispatch(removeAnimation(animationId))
+    store.dispatch(removeAnimationFromEverywhere(animationId))
   }
 
   handleKeyframeSubmit(e) {

src/components/venue/slot-grid.js

@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '../../reduxStore.js'
 import { addVenueSlot, setVenueSlot, removeVenueSlot } from '../../actions/venue.js'
-import { addAnimation, setAnimation, removeAnimation, addScene, setScene, removeScene, removeSceneFromTimelineAndResetFixtures } from '../../actions/index.js'
+import { addAnimation, setAnimation, removeAnimationFromEverywhere, addScene, setScene, removeScene, removeSceneFromTimelineAndResetFixtures } from '../../actions/index.js'
 import { getFixtures, getLive } from '../../selectors/index.js'
 import '../../components/venue/slot-item.js'
 import { repeat } from 'lit-html/directives/repeat.js'
@@ -138,7 +138,7 @@ class VenueSlotGrid extends connect(store)(LitElement) {
     store.dispatch(removeScene(sceneId))
 
     animations.forEach(animationId => {
-      store.dispatch(removeAnimation(animationId))
+      store.dispatch(removeAnimationFromEverywhere(animationId))
     })
 
     store.dispatch(removeVenueSlot(this.venueId, {

src/selectors/index.js

@@ -69,6 +69,14 @@ export const getScenesSorted = createSelector(
   scenes => scenes.sort((a, b) => collator.compare(a.name, b.name))
 )
 
+/*
+ * Get scenes that contain a certain animationId
+ */
+export const getScenesWithAnimation = (state, properties) => {
+  return getScenes(state)
+    .filter(scene => scene.animations.includes(properties.animationId))
+}
+
 /*
  * Get a specific fixture by using the fixtureId
  */