Question

我需要在图形应用程序中实现group / ungroup功能。目的是类似于Adobe Illustrator或Microsoft PowerPoint中的组/ ungroup功能。

组可以嵌套（即：一个组可以包含元素和其他组，而这些组又包含元素或组）

我想知道这样做的最佳数据结构是什么。

应该可以快速说出来：

元素是否在组中
包含它的最广泛群体中的兄弟姐妹

我在考虑这样的事情：

{
    groups: {
        g1: ['n1', 'n2', 'n3'],
        g2: ['n4', 'n5', 'g1'],
        g3: ['g2', 'n6', 'n7']
    },
    nodes {
        n1: 'g1',
        n2: 'g1',
        n3: 'g1',
        n4: 'g2',
        n5: 'g2',
        g1: 'n1',
        g2: 'g3',
        n6: 'g3',
        n7: 'g3'
    }
}

group包含组本身，nodes充当查找表以判断节点是否在组中。我可以告诉节点和组除了他们的ID（节点总是数字）。通过组递归将提供兄弟姐妹的列表。

这将被封装在一个对象中，该对象随后将处理组，取消组合和检入JavaScript。

这是理智的吗？还有更好的方法吗？

Answer 1

为什么不使用树形结构？像这样使用节点：

function Node (value, parent) {
  this.value = value;
  this.children = [];
  this.parent = parent || null
}

Node.prototype.addChild = function (node) { … }

Node.prototype.traverse = function (fx) {
  fx(this);
  this.children.forEach(function (child) {
    child.traverse(fx);
  });
}
…

var root = new Node({id: 100}, null);

使用它可以为更快的树遍历添加更多指针/引用。要测试节点是否在组中，您只需检查其父节点是否为空。许多其他测试/查询可以通过简单的树遍历来执行。

什么是分组和取消分组形状的最佳数据结构

1 个答案: