2021SC@SDUSC SDUDOC项目分析（五）

render与handler的逻辑，以Dot.js中的为例

handler：

当选中这个插件，并且在屏幕中执行相应操作时，ToolManager会调用当前插件的handler。
以左键点击为例，会新建一个点，点的类型由附近有无直线决定

ToolManager.addHandler(new Handler('dot.onMouseLeftClick', 'left_click', false, Engine,
  function(event){
    //非当前界面，直接返回
    if(DocumentManager.getCurrentPage() <= 0) return;
    //获取附近的Dot类点，若附近有点，则直接选中第一个点
    let collide_list = CollideManager.getCollideList(Dot2D.TAG, 1);
    if(collide_list.length > 0) {
      SelectManager.select(Dot2D.TAG, collide_list[0]);
      Graphics.refresh();
      return;
    }
   //附近无点，取消之前的选中
    SelectManager.unSelect();
    //获取附近的line
    collide_list = CollideManager.getCollideList(Line2D.TAG, 2);
    let dot_object = null;
    if(collide_list.length === 2){//附近有两条line，创建一个新的交叉点。调用elementManager中的makeelement新建点，并传入两条父直线
      dot_object = ElementManager.makeElement(Dot2D.TAG, [DocumentManager.getCurrentPageId()],
        Dot2D.Type.INTERSECTION, collide_list[0], collide_list[1]);
    }else if(collide_list.length === 1){//附近有一条line、
      //获取这条line的Line2D类
      let line = ElementManager.getElement(Line2D.TAG, collide_list[0]).getLine();
      //获取当前鼠标点击位置的point
      let mouse_point = Graphics.getSourcePoint(new Point(event.layerX, event.layerY));
      //传入这个鼠标点，并获得依赖坐标
      let dependent = line.getDependent(mouse_point);
      //调用makeElement创建直线
      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);
    }
    let page = DocumentManager.getCurrentPage();
    //加入history中
    HistoryManager.push([new History(function(){
      DocumentManager.removeElementWithUpdate(Dot2D.TAG, dot_object.id);
    },function(){
      DocumentManager.addElementWithUpdate(Dot2D.TAG, dot_object);
    }, page, page)]).then();
  })
);

render：

render分为注册在graphic中的渲染方法和注册在renderManager中的渲染类

//注册在graphics中的渲染方法，主要修改了颜色来区分不同种类的点
//调用了graphics中的下层方法来绘制点
Graphics.renderPointNormal = function(point){
  let fill_color = ColorManager.RGBToHex(0, 0, 255);
  let line_color = ColorManager.RGBToHex(255, 255, 255);
  this.drawPoint(point, 2.5, fill_color, 1, 1, line_color, 1);
};
Graphics.renderPointCollide = function(point){
  let fill_color = ColorManager.RGBToHex(255, 0, 0);
  let line_color = ColorManager.RGBToHex(255, 255, 255);
  this.drawPoint(point, 4, fill_color, 1, 2, line_color, 1);
};
Graphics.renderPointVirtual = function(point){
  let fill_color = ColorManager.RGBToHex(0, 0, 255);
  let line_color = ColorManager.RGBToHex(255, 255, 255);
  this.drawPoint(point, 4, fill_color, 0.5, 2, line_color, 0.5);
};
// --------------------------------------------------------------------------------
Graphics.renderPointNormalList = function(point_list){
  let fill_color = ColorManager.RGBToHex(0, 0, 255);
  let line_color = ColorManager.RGBToHex(255, 255, 255);
  this.drawPointList(point_list, 2.5, fill_color, 1, 1, line_color, 1);
};

RenderManager.addRenderer(new Renderer('dot.dot.all', '', 50, function(ctx){
  if(DocumentManager.getCurrentPage() <= 0) return;
 //从ColideManager中获取dot2d类，获取离上次鼠标点最近的元素
  let collide_list = CollideManager.getCollideList(Dot2D.TAG, 1);
//ElementManager获取所有的Dot2D
  let dots = ElementManager.getFilteredElements(Dot2D.TAG);
  let render_dots = [];
  for(let id in dots){
    if(collide_list.indexOf(id) === -1){//不是最近的，推入render——dots中，按照普通点渲染
      render_dots.push(Graphics.getRenderPoint(dots[id].getPoint()));
    }
  }
  //将渲染点列表交给graphics渲染
  Graphics.renderPointNormalList(render_dots);
  if(collide_list.length > 0){
    //把离得最近的点按选中渲染
    Graphics.renderPointCollide(Graphics.getRenderPoint(dots[collide_list[0]].getPoint()));
  }
}));