chore: enhace the SVG usage in visual editor

[yeze322]

Description

closes #1497
resovles #1906

This PR improves the usage of SVG elements in VisualEditor, with the improvements, several pixel issues are fixed (#1906 ) and #1497 wil be closed.

Details

Covered 3 areas of changes:

-	Area	Description
1	SVG semantic structure	[before] create a <svg /> container per edge -> [after] multiple edges share one svg container
2	Fix pixel issues	fix the line cap/miter problem; fix the trailing circle not aligned issue; '+' icon size aligns to design
3	Implement the EdgeUtil lib	retire the old lib EdgeComponent which doesn't follows svg conventions

1. semantic svg

• Multiple edges now share one <svg /> container (compared to previous solution, create a new svg container for every edge).

  // before
  <svg><line /></svg>
  <svg><line /></svg>
  
  // now
  <svg>
    <line />
    <line />
  </svg>

• The trailing circle is implemented as a <circle /> element

  // before
  <div style={{ borderRadius: '16px', border: '2px solid #979797' }} />
  // after
  <circle r="8" cx="50" cy="50" fill="none" stroke="#979797" strokeWidth="2" />

  It also fixes the circle alignment problem.
• An arrowhead is drawn by <polyline /> instead of two lines

2. fix pixel issues

• fix the trailing circle alignment issue (by drawing it with svg.circle)
  [now]
  
  [before]
  
• fix the line cap/miter problem appears in an arrowhead (reported by William)
  [now]
  
  [before]
  
• Adds button on edge
  

3. EdgeUtil lib:
As a result of 1&2, this PR contains a new lib for drawing edges and retires the old one EdgeComponent.

Task Item

#1497
#1906

Screenshots

[github-actions]

Coverage decreased (-0.3%) to 41.93% when pulling e346cc8 on visual/edgeUtils into db96de4 on master.