Slicer - Improve selection render

Author: graphieros

src/atoms/Slicer.vue

@@ -212,6 +212,7 @@ const minimapLine = computed(() => {
     return {
         fullSet,
         selectionSet,
+        sliced,
         firstPlot: points[props.valueStart],
         lastPlot: points[props.valueEnd - 1]
     }
@@ -320,6 +321,14 @@ function trapMouse(trap) {
                             style="opacity: 1"
                         />
 
+                        <rect
+                            :x="selectionRectCoordinates.x"
+                            :width="selectionRectCoordinates.width < 0 ? 0 : selectionRectCoordinates.width"
+                            :height="svgMinimap.height"
+                            :y="0"
+                            :fill="borderColor"
+                        />
+
                         <rect
                             :x="selectionRectCoordinates.x"
                             :width="selectionRectCoordinates.width < 0 ? 0 : selectionRectCoordinates.width"
@@ -331,6 +340,22 @@ function trapMouse(trap) {
                             }"
                         />
 
+                        <path 
+                            :d="`M${minimapLine.sliced[0].x},${svgMinimap.height} ${minimapLine.selectionSet} L${minimapLine.sliced.at(-1).x},${svgMinimap.height}Z`" 
+                            :fill="`url(#${uid})`"
+                            stroke="none"
+                            style="opacity: 1"
+                        />
+
+                        <path 
+                            :d="`M ${minimapLine.selectionSet}`" 
+                            :stroke="`${minimapLineColor}`" 
+                            fill="transparent"
+                            stroke-width="2" 
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+
                         <circle
                             :cx="minimapLine.firstPlot.x"
                             :cy="minimapLine.firstPlot.y"
@@ -339,7 +364,7 @@ function trapMouse(trap) {
                             r="3"
                             :fill="minimapLineColor"
                         />
-                        
+
                         <circle
                             :cx="minimapLine.lastPlot.x"
                             :cy="minimapLine.lastPlot.y"