javascript - 传单:连接线内可拖动标记的架构

Question

我正在开发一个基于传单的原理图/图表编辑器。本质上，这是由折线连接的任意数量的交互式(即可拖动)标记:

我想开发系统，以便在拖动标记时，重新绘制连接的多段线以与它们一起拖动。

目前，标记和多段线相互不知道。标记是扩展 L.marker 的自定义类，折线同样扩展 L.Polyline。L.Map 已扩展为提供“addComponent”(Component == marker)和“linkComponents”方法。

我在架构方面的第一个想法是在标记本身上保存对每条连接的多段线的引用。然后我可以覆盖拖动处理程序以重绘每条折线。

这带来了两个问题:

• 标记如何知道我需要更改多段线的哪一“端”的坐标？

• 在某些时候，我希望能够通过一些用户交互来单独删除行。如果我这样做，连接的标记现在将持有对不包含的多段线的引用存在!所以解决这个问题的方法是让每条折线也持有对它们连接的标记的引用。但现在看来变得有点脆弱，有多个地方我可能需要更新信息。

所以我正在寻找有关实现此功能的合理方法/模式的建议

Answer 1

答案，或者至少是一个的答案是让我停止像一个痴迷于 OO 的进取型开发人员那样思考，而是利用传单事件系统。

当我创建多段线时，我传入原始标记以计算多段线的起点和终点:

const Link = L.Polyline.extend({

  options: {
    fromIcon: null,
    fromPort: null,
    toIcon: null,
    toPort: null
  },

  initialize: function(latlngs, options) {
    L.Util.setOptions(this, options);

    // We will insert the 'from port' coordinate at the start and the
    // 'to' coordinate at the end. 
    // 'getPortLocation' is just a simple function to return the LatLng of where a line should start to be drawn over a 'port'
    const start = this.options.fromIcon.getPortLocation(this.options.fromPort);
    const end = this.options.toIcon.getPortLocation(this.options.toPort);

    // Insert port positions at the start and end af the latlng array.
    latlngs.unshift(start);
    latlngs.push(end);
    this._setLatLngs(latlngs);
  }
}

一个简单的解决方案是简单地监听拖动事件:

    // Make sure the line is updated when the connected markers are moved
    this.options.fromIcon.on('drag', (event) => this.fromDragHandler(event, this.options.fromPort));
    this.options.toIcon.on('drag', (event) => this.toDragHandler(event, this.options.toPort));

然后重新画线:

fromDragHandler: function(event, portNum) {
  const marker = event.target;
  const latlngs = this.getLatLngs();
  const newPos = marker.getPortLocation(portNum);
  latlngs[0] = newPos;
  this.setLatLngs(latlngs);
}

在提问之前，我是否更认真地思考并浏览了更多代码......