javascript - 在 JointJS 中显示隐藏元素

Question

This answer展示如何隐藏可见元素。我想创建操作来切换某些元素的可见性。根据documentation我需要使用 element.removeAttr 删除一些属性。我可以看到已删除的 ./display', 'none' 属性，但 UI 元素仍然隐藏 - 它们应该是可见的。

你知道我错过了什么吗？我应该以某种方式重新渲染 UI 吗？

以下是我的事件。

paper.on('cell:pointerdown', function switchTaskVisibility(...args) {
  const selectedItem = args[0];
  const successors = graph.getSuccessors(selectedItem.model);
  const tasks = successors.filter(function isElementOfTypeTask(element) {
    const type = element.prop('type');
    if (type === 'task') return element;
  });
  console.log(tasks);

  const hasVisibleTasks = selectedItem.model.prop('hasVisibleTasks');
  if (hasVisibleTasks) {
    tasks.forEach((element) => {
      element.attr('./display', 'none');
    });
  }
  else {
    tasks.forEach((element) => {
      element.removeAttr('./display');
    });
  }

  // HERE I CAN SEE THAT DISPLAY ATTRIBUTE SWITCHES CORRECTLY
  // BUT AFTER FIRST HIDING OF ELEMENTS I CANNOT MAKE THEM VISIBLE IN UI
  console.log(graph.getSuccessors(selectedItem.model)); 

  selectedItem.model.prop('hasVisibleTasks', !hasVisibleTasks);
});

谢谢

拉法尔

Answer 1

我找到了一些解决方法。由于某种原因 removeAttr 无法正确重新渲染元素，因此我测试了 visibility 属性，如下所示:

  const hasVisibleTasks = selectedElement.prop('hasVisibleTasks');
  if (hasVisibleTasks) {
    cells.forEach((element) => {
      element.attr('./visibility', 'hidden');
    });
  }
  else {
    cells.forEach((element) => {
    element.attr('./visibility', 'visible');
  });

并且工作正常。但我仍然不明白为什么 element.removeAttr('./display') 没有提前重新渲染 UI。

最诚挚的问候，

拉法尔