2021SC@SDUSC SDUDOC项目分析（十二）

Line（二）

添加的handler：left_click 新建一条点到之前已经选中点的直线，如果没有点，就创建一个

ToolManager.addHandler(new Handler('line.onMouseLeftClick', 'left_click', false, Engine,
  function(event){
    if(DocumentManager.getCurrentPage() <= 0) return;
    let collide_list = CollideManager.getCollideList(Dot2D.TAG, 1);
    //鼠标点击点附近最近的直线

    if(collide_list.length === 0){
      //附近没有点
      //获取附近的Line实例
      collide_list = CollideManager.getCollideList(Line2D.TAG, 2);
      let dot_object = null;
      //附近有两条直线，在直线交点创建交叉点
      if(collide_list.length === 2){
        dot_object = ElementManager.makeElement(Dot2D.TAG, [DocumentManager.getCurrentPageId()],
          Dot2D.Type.INTERSECTION, collide_list[0], collide_list[1]);
      }else if(collide_list.length === 1){
        //附近有两条线，创建依赖点
        let line = ElementManager.getElement(Line2D.TAG, collide_list[0]).getLine();
        let mouse_point = Graphics.getSourcePoint(new Point(event.layerX, event.layerY));
        let dependent = line.getDependent(mouse_point);
        dot_object = ElementManager.makeElement(Dot2D.TAG, [DocumentManager.getCurrentPageId()],
          Dot2D.Type.DEPENDENT, collide_list[0], dependent);
      }else{
        //附近没有直线，创建一个自由点
        let mouse_point = Graphics.getSourcePoint(new Point(event.layerX, event.layerY));
        dot_object = ElementManager.makeElement(Dot2D.TAG, [DocumentManager.getCurrentPageId()],
          Dot2D.Type.FREE, mouse_point.x, mouse_point.y);
      }
      DocumentManager.addElement(Dot2D.TAG, dot_object);

      if(SelectManager.isSelectedType(Dot2D.TAG)) {
        //如果附近有之前选中的点
        let line_object = ElementManager.makeElement(Line2D.TAG, [DocumentManager.getCurrentPageId()],
          SelectManager.getSelectedId(), dot_object.id);
        //从当前点到之前选中的点画一条直线  
        if(OptionManager.getValue('line', 'line.continue')){
          //如果选中的模式是连续画点
          SelectManager.selectObject(dot_object);
        }else{
          SelectManager.unSelect();
        }
        DocumentManager.addElementWithUpdate(Line2D.TAG, line_object);
      }else{
        //否则就选中当前点
        SelectManager.selectObject(dot_object);
        DocumentManager.afterChangeElement();
      }
    }
    
    else{
      //附近已经有一个点的情况
      //也是在鼠标点击点处创建一个新直线
      if(SelectManager.isSelectedType(Dot2D.TAG)){
        let line_object = ElementManager.makeElement(Line2D.TAG, [DocumentManager.getCurrentPageId()],
          SelectManager.getSelectedId(), collide_list[0]);
        if(OptionManager.getValue('line', 'line.continue')){
          SelectManager.select(Dot2D.TAG, collide_list[0]);
        }else{
          SelectManager.unSelect();
        }
        DocumentManager.addElementWithUpdate(Line2D.TAG, line_object);
      }else{
        SelectManager.select(Dot2D.TAG, collide_list[0]);
        Graphics.update();
      }
    }
  })
);

handler right_click 取消之前的选中

在graphics中也注册了一些渲染器，和之前的dot一样，都是指定line选中未选中不同状态时的样式

render：

'line.line.all 和dot一样，将line分类并调用之前注册的graphics中注册的渲染器渲染

'!line.line.all 直接获取所有的line，创建他们的渲染line并交给graphics渲染，样式都是普通线

line.dot.collide 获取鼠标点击位置最近的一个点，若有，则交给graphics渲染一个colide点

line.line.mouse：似乎是用来展示新建线的位置，渲染的都是LineVirtual

RenderManager.addRenderer(new Renderer('line.line.mouse', '', 49, function(ctx){
  if(DocumentManager.getCurrentPage() <= 0) return;
  let collide_list = CollideManager.getCollideList(Dot2D.TAG, 1);
  //获取离鼠标点最近的dot
  if(collide_list.length > 0) {
    //乳沟当前有点，且当前选中的是dot
    if(SelectManager.isSelectedType(Dot2D.TAG)){
      //渲染一条当前点到已被选中dot的一条LineVirtual（？）
      //获取collide_list的点
      let dot_object = ElementManager.getElement(Dot2D.TAG, collide_list[0]);
      //从选中点到当前点渲染一条线，不添加到element_manager
      let line = new Line(SelectManager.getSelectedObject().getPoint(), dot_object.getPoint());
      Graphics.renderLineVirtual(Graphics.getRenderLine(line));
    }
  }else{
    //鼠标附近没有点
    let line = null;
    //获取鼠标点
    let mouse_point = Graphics.getMouseSourcePoint();
    if(!mouse_point) return;
    //没有选中任何点，return
    if(!SelectManager.isSelectedType(Dot2D.TAG)) return;
    //有选中点，获取被选中的点
    let start_point = SelectManager.getSelectedObject().getPoint();
    //获取附近最近的两条线
    collide_list = CollideManager.getCollideList(Line2D.TAG, 2);
    //如果附近有两条线
    if(collide_list.length === 2){
      //获取这两条线的计算类
      let line1 = ElementManager.getElement(Line2D.TAG, collide_list[0]).getLine();
      let line2 = ElementManager.getElement(Line2D.TAG, collide_list[1]).getLine();
      //获取两条直线的交叉点
      let intersection_point = line1.getIntersectionPoint(line2);
      //获取一条从选中点到交叉点的线
      line = new Line(start_point, intersection_point);
    }else if(collide_list.length === 1){
      //附近只有一条线，获取鼠标点击点在直线上的映射位置
      let line1 = ElementManager.getElement(Line2D.TAG, collide_list[0]).getLine();
      let projection_point = line1.getProjectionPoint(mouse_point);
      line = new Line(start_point, projection_point);
    }else{
      //没有线，直接按自由点新建直线
      line = new Line(start_point, mouse_point);
    }
    if(line !== null){
      //渲染LineVirtual
      Graphics.renderLineVirtual(Graphics.getRenderLine(line));
    }
  }
}));

line.dot.mouse：在鼠标点附近渲染一个PointVirtual