@/utils#getElementPath JavaScript Examples

mutations = {
  setPrjectData (state, data) {
    state.projectData = data
  },
  setActivePageUUID (state, data) {
    state.activePageUUID = data
  },
  setActiveElementUUID (state, data) {
    state.activeElementUUID = data
  },
  /**
   * 更新项目主图
   * @param commit
   * @param url
   */
  updateCoverImage (state, url) {
    state.projectData.coverImage = url
  },
  /**
   * 新增页面
   */
  insertPage (state, data, index) {
    if (index) {
      state.projectData.pages.splice(index, 0, data)
    } else {
      state.projectData.pages.push(data)
    }
  },
  /**
   * 删除页面
   */
  deletePage (state, index) {
    state.projectData.pages.splice(index, 1)
  },
  /**
   * 更新页面
   */
  updatePage (state, pages) {
    state.projectData.pages = pages
  },

  // =============================元素相关========================================
  addElementToTarget (state, { elData, targetUUID }) {
    // console.log('elData', elData, targetUUID)
    const pageIndex = state.projectData.pages.findIndex(v => {return v.uuid === state.activePageUUID})
    let target = getActiveElement(state.projectData.pages[pageIndex], targetUUID)
    // state.projectData.pages[pageIndex].elements.push(elData);
    Vue.set(target, 'elements', target.elements ? [...target.elements, elData] : [elData])
    // target = { ...target, elements: target.elements ? [...target.elements, elData] : [elData] }
    // target.elements ? target.elements.push(elData) : target.elements = [elData]
  },
  updateElement (state, { data, key, uuid }) {
    const pageIndex = state.projectData.pages.findIndex(v => {return v.uuid === state.activePageUUID})
    let target = getActiveElement(state.projectData.pages[pageIndex], uuid)
    // state.projectData.pages[pageIndex].elements.push(elData);
    Vue.set(target, key, data)
  },
  /**
   * 往画板添加元素
   * @param state
   * @param elData
   */
  addElement (state, elData) {
    let index = state.projectData.pages.findIndex(v => {return v.uuid === state.activePageUUID})
    state.projectData.pages[index].elements.push(elData)
  },
  /**
   * 往画板添加元素
   * @param state
   * @param elData
   */
  deleteElement (state, uuid) {
    let activePage = getters.activePage(state)
    const elementPath = getElementPath(activePage, uuid)
    // console.log(elementPath)
    if (elementPath) {
      // console.log(elementPath)
      const parentElementPath = elementPath.slice(0, -2)
      console.log(parentElementPath)
      const parentElement = get(activePage, parentElementPath)
      console.log(parentElement)
      let elementIndex = parentElement.findIndex(v => {return v.uuid === uuid})
      parentElement.splice(elementIndex, 1)
    }

  },
  /**
   * 重置元素样式，
   * @param commit
   * @param uuid
   * @param styleObject
   */
  resetElementCommonStyle (state, style) {
    let activeElement = getters.activeElement(state)
    activeElement.commonStyle = merge(activeElement.commonStyle, style)
  },

  /**
   * 添加动画到元素上
   * @param state
   * @param data
   */
  addElementAnimate (state, data) {
    let activeElement = getters.activeElement(state)
    activeElement.animations.push(data)
  },
  /**
   * 删除动画到元素上
   * @param state
   * @param index
   */
  deleteElementAnimate (state, index) {
    let activeElement = getters.activeElement(state)
    activeElement.animations.splice(index, 1)
  },
  /**
   * 添加事件
   * @param state
   * @param data
   */
  addElementEvent (state, data) {
    let activeElement = getters.activeElement(state)
    activeElement.events.push(data)
  },
  /**
   * 删除事件
   * @param state
   * @param index
   */
  deleteElementEvent (state, index) {
    let activeElement = getters.activeElement(state)
    activeElement.events.splice(index, 1)
  },
  /**
   * 改变元素zIndex
   * @param state
   * @param uuid
   * @param type layerUp上一层，layerDown下一层，layerTop置顶， layerBottom置底
   */
  resetElementZIndex (state, { uuid, type }) {
    uuid = uuid || state.activeElementUUID
    let activePage = getters.activePage(state)
    let currentElement = getActiveElement(activePage, state.activeElementUUID)
    let itemZIndex = currentElement.commonStyle.zIndex
    let maxZIndex = activePage.elements.reduce((prev, cur) => cur.commonStyle.zIndex > prev ? cur.commonStyle.zIndex : prev, 1)
    let mminIndex = 1
    let zIndexDirc = {
      layerUp: Math.min(itemZIndex + 1, maxZIndex),
      layerDown: Math.max(itemZIndex - 1, mminIndex),
      layerTop: maxZIndex,
      layerBottom: mminIndex,
      set0: 0
    }
    if (zIndexDirc[type] === undefined) return
    let currentZIndex = zIndexDirc[type]
    currentElement.commonStyle.zIndex = currentZIndex
    activePage.elements.forEach(item => {
      if (uuid === item.uuid) return
      // 上面一位zIndex减一
      if (type === 'layerUp' && item.commonStyle.zIndex === currentZIndex) {
        item.commonStyle.zIndex--
      }
      // 下面元素zIdex加一
      if (type === 'layerDown' && item.commonStyle.zIndex === currentZIndex) {
        item.commonStyle.zIndex++
      }
      // 目标元素zIndex 以上的都减一
      if (type === 'layerTop' && item.commonStyle.zIndex > itemZIndex) {
        item.commonStyle.zIndex--
      }
      // 目标元素zIndex以下的都加一
      if ((type === 'layerBottom' || type === 'set0') && item.commonStyle.zIndex < itemZIndex) {
        item.commonStyle.zIndex++
      }
    })
  },

  // ================================历史纪录========================================
  /**
   * 新增一条历史纪录
   * @param state
   */
  addHistoryCache (state) {
    if (state.currentHistoryIndex + 1 < state.historyCache.length) {
      state.historyCache.splice(state.currentHistoryIndex + 1)
    }
    state.historyCache.push({
      projectData: cloneDeep(state.projectData),
      activePageUUID: state.activePageUUID,
      activeElementUUID: state.activeElementUUID
    })
    // 限制undo 纪录步数，最多支持100步操作undo
    state.historyCache.splice(100)
    state.currentHistoryIndex++
  },
  /**
   *
   * @param state
   */
  editorUndo (state) {
    state.currentHistoryIndex--
  },
  /**
   *
   * @param state
   */
  editorRedo (state) {
    state.currentHistoryIndex++
  },
  /**
   * 更新编辑器项目数据，从history中拿数据替换
   * @param state
   * @param data
   */
  relapceEditorState (state, data) {
    state.projectData = cloneDeep(data.projectData)
    state.activePageUUID = data.activePageUUID
    state.activeElementUUID = data.activeElementUUID
  },
  /**
   * 设置编辑属性折叠面板展开收起状态
   * @param state
   * @param data
   */
  updateActiveAttrEditCollapse (state, data) {
    state.activeAttrEditCollapse = [...data]
  }
}