antv g6的撤销、重做功能

1.撤销

 const undo = () => {
    const undoStack = graph.value.getUndoStack();
    console.log(undoStack);
    if (!undoStack || undoStack.length === 0) {
      return;
    }
    const currentData = undoStack.pop();
    console.log(currentData);
    if (currentData) {
      const { action } = currentData;
      console.log(action);
      graph.value.pushStack(action, currentData.data, 'redo');
      let data = currentData.data.before;
      if (action === 'add') {
        data = currentData.data.after;
      }
      if (!data) return;
      switch (action) {
        case 'visible': {
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              const item = graph.value.findById(model.id);
              if (model.visible) {
                graph.value.showItem(item, false);
              } else {
                graph.value.hideItem(item, false);
              }
            });
          });
          break;
        }
        case 'render':
        case 'update':
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              const item = graph.value.findById(model.id);
              delete model.id;
              graph.value.updateItem(item, model, false);
              if (item.getType() === 'combo') graph.value.updateCombo(item as ICombo);
            });
          });
          break;
        case 'changedata':
          graph.value.changeData(data, false);
          break;
        case 'delete': {
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              const itemType = model.itemType;
              delete model.itemType;
              graph.value.addItem(itemType, model, false);
            });
          });
          break;
        }
        case 'add':
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              graph.value.removeItem(model.id, false);
            });
          });
          break;
        case 'updateComboTree':
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              graph.value.updateComboTree(model.id, model.parentId, false);
            });
          });
          break;
        case 'createCombo':
          const afterCombos = currentData.data.after.combos;
          const createdCombo = afterCombos[afterCombos.length - 1];
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              graph.value.updateComboTree(model.id, model.parentId, false);
            });
          });
          graph.value.removeItem(createdCombo.id, false);
          break;
        case 'uncombo':
          const targetCombo = data.combos[data.combos.length - 1];
          const childrenIds = data.nodes
            .concat(data.combos)
            .map((child) => child.id)
            .filter((id) => id !== targetCombo.id);
          graph.value.createCombo(targetCombo, childrenIds, false);
          break;
        case 'layout':
          graph.value.updateLayout(data, undefined, undefined, false);
          break;
        default:
      }
    }
  };

2.重做

// 重做
  const redo = () => {
    const redoStack = graph.value.getRedoStack();
    console.log(redoStack);
    if (!redoStack || redoStack.length === 0) {
      return;
    }
    const currentData = redoStack.pop();
    console.log(currentData);
    if (currentData) {
      const { action } = currentData;
      let data = currentData.data.after;
      graph.value.pushStack(action, currentData.data);
      if (action === 'delete') {
        data = currentData.data.before;
      }
      if (!data) return;
      switch (action) {
        case 'visible': {
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              const item = graph.value.findById(model.id);
              if (model.visible) {
                graph.value.showItem(item, false);
              } else {
                graph.value.hideItem(item, false);
              }
            });
          });
          break;
        }
        case 'render':
        case 'update':
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              const item = graph.value.findById(model.id);
              delete model.id;
              graph.value.updateItem(item, model, false);
              if (item.getType() === 'combo') graph.value.updateCombo(item as ICombo);
            });
          });
          break;
        case 'changedata':
          graph.value.changeData(data, false);
          break;
        case 'delete':
          if (data.edges) {
            data.edges.forEach((model) => {
              graph.value.removeItem(model.id, false);
            });
          }
          if (data.nodes) {
            data.nodes.forEach((model) => {
              graph.value.removeItem(model.id, false);
            });
          }
          if (data.combos) {
            data.combos.forEach((model) => {
              graph.value.removeItem(model.id, false);
            });
          }
          break;
        case 'add': {
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              const itemType = model.itemType;
              delete model.itemType;
              graph.value.addItem(itemType, model, false);
            });
          });
          break;
        }
        case 'updateComboTree':
          Object.keys(data).forEach((key) => {
            const array = data[key];
            if (!array) return;
            array.forEach((model) => {
              graph.value.updateComboTree(model.id, model.parentId, false);
            });
          });
          break;
        case 'createCombo':
          const createdCombo = data.combos[data.combos.length - 1];
          graph.value.createCombo(
            createdCombo,
            createdCombo.children.map((child) => child.id),
            false,
          );
          break;
        case 'uncombo':
          const beforeCombos = currentData.data.before.combos;
          const targertCombo = beforeCombos[beforeCombos.length - 1];
          graph.value.uncombo(targertCombo.id, false);
          break;
        case 'layout':
          graph.value.updateLayout(data, undefined, undefined, false);
          break;
        default:
      }
    }
  };

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
AntV G6 是一款基于 JavaScript 的图形绘制库,它提供了丰富的图形绘制能力和交互功能,可以用于构建各种类型的可视化应用。接下来,我们将重点介绍 G6重做功能文档。 ## 重做功能概述 重做功能是指用户在撤销操作后可以重新执行之前撤销的操作。在 G6 库中,重做功能可以帮助用户恢复之前已经撤销的图形编辑操作,提高用户的使用体验。 ## 重做功能使用说明 ### 实现步骤 G6 中实现重做功能的步骤如下: 1. 定义一个 undoStack 数组,用于记录用户的撤销操作。 ```javascript const undoStack = []; ``` 2. 在用户执行操作时,将操作记录到 undoStack 数组中。 ```javascript graph.updateItem(item, attrs); // 执行更新操作 undoStack.push({ type: 'update', item, attrs }); // 记录操作 ``` 3. 当用户撤销操作时,从 undoStack 数组中取出最后一个操作记录,并执行相应的撤销操作。 ```javascript const lastAction = undoStack.pop(); switch (lastAction.type) { case 'update': graph.updateItem(lastAction.item, lastAction.attrs); break; // 处理其他类型的操作 } ``` 4. 当用户重做操作时,从 undoStack 数组中取出最后一个撤销操作记录,并执行相应的操作。 ```javascript const lastUndoAction = undoStack.pop(); // 将操作记录到 redoStack 数组中 redoStack.push(lastUndoAction); switch (lastUndoAction.type) { case 'update': graph.updateItem(lastUndoAction.item, lastUndoAction.attrs); break; // 处理其他类型的操作 } ``` 5. 当用户进行新的操作时,清空 redoStack 数组。 ```javascript redoStack = []; ``` ### 注意事项 在实现重做功能时,需要注意以下几点: 1. 操作记录的数据结构需要包含操作类型、操作对象和操作属性等信息,以便在撤销重做操作时能够正确地还原操作。 2. 操作记录需要及时地存储到 undoStack 数组中,否则当用户进行撤销操作时无法找到之前的操作记录。 3. 在进行撤销重做操作时,需要判断 undoStack 和 redoStack 数组是否为空,以避免出现数组越界等错误。 4. 当用户进行新的操作时,需要清空 redoStack 数组,否则之前的撤销操作记录将无法再次执行。 ## 总结 通过以上介绍,我们可以看到 G6 中实现重做功能的方法非常简单,只需要记录用户的操作记录,并在撤销重做操作时正确地还原操作即可。在实际应用中,我们可以根据具体场景灵活地使用重做功能,提高用户的使用体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文哈哈wcx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值