/**
  * Replaces an existing layer in the tree with a new layer. Note that
  * this method assumes that both layers still have the same children layers.
  */
 swapLayers(layerId: string, newLayer: Layer) {
   if (layerId === newLayer.id) {
     this.updateLayer(newLayer);
     return;
   }
   const vl = this.getVectorLayer();
   const parent = LayerUtil.findParent(vl, layerId).clone();
   const layerIndex = _.findIndex(parent.children, l => l.id === layerId);
   const children = [...parent.children];
   children.splice(layerIndex, 1, newLayer);
   parent.children = children;
   const actions: Action[] = [
     new SetVectorLayer(LayerUtil.updateLayer(vl, parent)),
     ...this.buildCleanupLayerIdActions(layerId),
   ];
   const animation = this.getAnimation();
   const oldLayerBlocks = animation.blocks.filter(b => b.layerId === layerId);
   const newAnimatableProperties = new Set(newLayer.animatableProperties.keys());
   // Preserve any blocks that are still animatable with the new layer.
   const newLayerBlocks = oldLayerBlocks
     .filter(b => newAnimatableProperties.has(b.propertyName))
     .map(b => {
       b = b.clone();
       b.layerId = newLayer.id;
       return b;
     });
   const newAnimation = animation.clone();
   newAnimation.blocks = [
     ...animation.blocks.filter(b => b.layerId !== layerId),
     ...newLayerBlocks,
   ];
   actions.push(new SetAnimation(newAnimation));
   this.store.dispatch(new BatchAction(...actions));
 }

 tempSelLayers = tempSelLayers.filter(layer => {
   if (layer instanceof VectorLayer) {
     return false;
   }
   let p = LayerUtil.findParent(vl, layer.id);
   while (p) {
     if (_.find(tempSelLayers, l => l.id === p.id)) {
       return false;
     }
     p = LayerUtil.findParent(vl, p.id);
   }
   return true;
 });

 tempSelLayers.filter(layer => layer instanceof GroupLayer).forEach(groupLayer => {
   // Move children into parent.
   const parent = LayerUtil.findParent(vl, groupLayer.id).clone();
   const indexInParent = Math.max(
     0,
     _.findIndex(parent.children, l => l.id === groupLayer.id),
   );
   const newChildren = [...parent.children];
   newChildren.splice(indexInParent, 0, ...groupLayer.children);
   parent.children = newChildren;
   vl = LayerUtil.updateLayer(vl, parent);
   newSelectedLayers.splice(0, 0, ...groupLayer.children);
   // Delete the parent.
   vl = LayerUtil.removeLayers(vl, groupLayer.id);
 });

 const makeFinalNodeIdFn = (nodeId: string, prefix: string) => {
   const finalName = LayerUtil.getUniqueName(
     NameProperty.sanitize(nodeId || prefix),
     name => doesNameExistFn(name) || usedIds.has(name),
   );
   usedIds.add(finalName);
   return finalName;
 };

 const makeFinalNodeIdFn = (value: string, prefix: string) => {
   const finalName = LayerUtil.getUniqueName(
     NameProperty.sanitize(value || prefix),
     n => doesLayerNameExistFn(n) || usedNames.has(n),
   );
   usedNames.add(finalName);
   return finalName;
 };

 /**
  * Adds a layer to the vector tree.
  */
 addLayer(layer: Layer) {
   const vl = this.getVectorLayer();
   const selectedLayers = this.getSelectedLayers();
   if (selectedLayers.length === 1) {
     const selectedLayer = selectedLayers[0];
     if (!(selectedLayer instanceof VectorLayer)) {
       // Add the new layer as a sibling to the currently selected layer.
       const parent = LayerUtil.findParent(vl, selectedLayer.id).clone();
       parent.children = [...parent.children, layer];
       this.updateLayer(parent);
       return;
     }
   }
   const vectorLayer = vl.clone();
   vectorLayer.children = [...vectorLayer.children, layer];
   this.updateLayer(vectorLayer);
 }

 (vl, anim, block) => {
   if (!block) {
     return undefined;
   }
   // Note this is a bit dangerous because the renderer interpolates paths
   // and that causes all mutated path state to be lost if we aren't careful.
   // There are currently checks in PathProperty.ts to avoid this by returning
   // the start and end path when the interpolated fraction is 0 and 1 respectively.
   const renderer = new AnimationRenderer(vl, anim);
   const timeMillis = getTimeFn(block);
   // First interpolate the entire vector layer.
   const renderedVl = renderer.setCurrentTime(timeMillis);
   // TODO: this is hacky! the real solution is to not clear path state after interpolations
   // Replace the interpolated value with the block's to/from value.
   const layer = vl.findLayerById(block.layerId).clone() as MorphableLayer;
   layer.pathData = timeMillis === block.startTime ? block.fromValue : block.toValue;
   return LayerUtil.updateLayer(renderedVl, layer);
 },

  /**
   * Groups or ungroups the selected layers.
   */
  groupOrUngroupSelectedLayers(shouldGroup: boolean) {
    let selectedLayerIds = this.getSelectedLayerIds();
    if (!selectedLayerIds.size) {
      return;
    }
    let vl = this.getVectorLayer();

    // Sort selected layers by order they appear in tree.
    let tempSelLayers = Array.from(selectedLayerIds).map(id => vl.findLayerById(id));
    const selLayerOrdersMap: Dictionary<number> = {};
    let n = 0;
    vl.walk(layer => {
      if (_.find(tempSelLayers, l => l.id === layer.id)) {
        selLayerOrdersMap[layer.id] = n;
        n++;
      }
    });
    tempSelLayers.sort((a, b) => selLayerOrdersMap[a.id] - selLayerOrdersMap[b.id]);

    if (shouldGroup) {
      // Remove any layers that are descendants of other selected layers,
      // and remove the vectorLayer itself if selected.
      tempSelLayers = tempSelLayers.filter(layer => {
        if (layer instanceof VectorLayer) {
          return false;
        }
        let p = LayerUtil.findParent(vl, layer.id);
        while (p) {
          if (_.find(tempSelLayers, l => l.id === p.id)) {
            return false;
          }
          p = LayerUtil.findParent(vl, p.id);
        }
        return true;
      });

      if (!tempSelLayers.length) {
        return;
      }

      // Find destination parent and insertion point.
      const firstSelectedLayerParent = LayerUtil.findParent(vl, tempSelLayers[0].id).clone();
      const firstSelectedLayerIndexInParent = _.findIndex(
        firstSelectedLayerParent.children,
        l => l.id === tempSelLayers[0].id,
      );

      // Remove all selected items from their parents and move them into a new parent.
      const newGroup = new GroupLayer({
        name: LayerUtil.getUniqueLayerName([vl], 'group'),
        children: tempSelLayers,
      });
      const parentChildren = [...firstSelectedLayerParent.children];
      parentChildren.splice(firstSelectedLayerIndexInParent, 0, newGroup);
      _.remove(parentChildren, child =>
        _.find(tempSelLayers, selectedLayer => selectedLayer.id === child.id),
      );
      firstSelectedLayerParent.children = parentChildren;
      vl = LayerUtil.updateLayer(vl, firstSelectedLayerParent);
      selectedLayerIds = new Set([newGroup.id]);
    } else {
      // Ungroup selected groups layers.
      const newSelectedLayers: Layer[] = [];
      tempSelLayers.filter(layer => layer instanceof GroupLayer).forEach(groupLayer => {
        // Move children into parent.
        const parent = LayerUtil.findParent(vl, groupLayer.id).clone();
        const indexInParent = Math.max(
          0,
          _.findIndex(parent.children, l => l.id === groupLayer.id),
        );
        const newChildren = [...parent.children];
        newChildren.splice(indexInParent, 0, ...groupLayer.children);
        parent.children = newChildren;
        vl = LayerUtil.updateLayer(vl, parent);
        newSelectedLayers.splice(0, 0, ...groupLayer.children);
        // Delete the parent.
        vl = LayerUtil.removeLayers(vl, groupLayer.id);
      });
      selectedLayerIds = new Set(newSelectedLayers.map(l => l.id));
    }
    this.store.dispatch(
      new BatchAction(new SetVectorLayer(vl), new SetSelectedLayers(selectedLayerIds)),
    );
  }