fix: exclude Graphic padding from paddingColor

spatialnetworkslab · Mar 17, 2020 · 679aaba · 679aaba
1 parent 8be1aaa
commit 679aaba
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 10 deletions.
diff --git a/src/components/Core/Section/Section.svelte b/src/components/Core/Section/Section.svelte
@@ -212,8 +212,10 @@
 <defs>
   <mask id={`mask-${sectionId}-padding-bg`}>
     <rect
-      width="100%"
-      height="100%"
+      x={Math.min(scaledCoordinates.x1, scaledCoordinates.x2)}
+      y={Math.min(scaledCoordinates.y1, scaledCoordinates.y2)}
+      width={Math.abs(scaledCoordinates.x2 - scaledCoordinates.x1)}
+      height={Math.abs(scaledCoordinates.y2 - scaledCoordinates.y1)}
       fill="white" />
     <rect
       x={Math.min(...rangeX)}

diff --git a/test/integration/tests/components/__snapshots__/area.spec.js.snap b/test/integration/tests/components/__snapshots__/area.spec.js.snap
@@ -2,7 +2,7 @@ exports[`Assertions > Area Tests > [render] area snapshot correctly #0`] = `
 <svg width="700" height="500">
   <defs>
     <mask id="mask-sc0-padding-bg">
-      <rect width="100%" height="100%" fill="white"></rect>
+      <rect x="0" y="0" width="700" height="500" fill="white"></rect>
       <rect x="30" y="20" width="650" height="450" fill="black"></rect>
     </mask>
     <clipPath id="clip-sc0-data">

diff --git a/test/integration/tests/components/__snapshots__/arealayer.spec.js.snap b/test/integration/tests/components/__snapshots__/arealayer.spec.js.snap
@@ -2,7 +2,7 @@ exports[`Assertions > AreaLayer Tests > [render] area layer snapshot correctly #
 <svg width="700" height="500">
   <defs>
     <mask id="mask-sc0-padding-bg">
-      <rect width="100%" height="100%" fill="white"></rect>
+      <rect x="0" y="0" width="700" height="500" fill="white"></rect>
       <rect x="30" y="20" width="650" height="450" fill="black"></rect>
     </mask>
     <clipPath id="clip-sc0-data">

diff --git a/test/integration/tests/components/__snapshots__/geo.spec.js.snap b/test/integration/tests/components/__snapshots__/geo.spec.js.snap
@@ -2,7 +2,7 @@ exports[`Assertions > Geo Tests > [render] geo polygons correctly #0`] = `
 <svg width="500" height="500">
   <defs>
     <mask id="mask-sc0-padding-bg">
-      <rect width="100%" height="100%" fill="white"></rect>
+      <rect x="0" y="0" width="500" height="500" fill="white"></rect>
       <rect x="0" y="0" width="500" height="500" fill="black"></rect>
     </mask>
     <clipPath id="clip-sc0-data">

diff --git a/test/integration/tests/components/__snapshots__/label.spec.js.snap b/test/integration/tests/components/__snapshots__/label.spec.js.snap
@@ -2,7 +2,7 @@ exports[`Assertions > Label Mark Tests > [render] labels snapshot correctly #0`]
 <svg width="500" height="500">
   <defs>
     <mask id="mask-sc0-padding-bg">
-      <rect width="100%" height="100%" fill="white"></rect>
+      <rect x="50" y="50" width="400" height="400" fill="white"></rect>
       <rect x="50" y="50" width="400" height="400" fill="black"></rect>
     </mask>
     <clipPath id="clip-sc0-data">

diff --git a/test/integration/tests/components/__snapshots__/rectangle.spec.js.snap b/test/integration/tests/components/__snapshots__/rectangle.spec.js.snap
@@ -2,7 +2,7 @@ exports[`Assertions > Rectangle Tests > [render] rectangles snapshot correctly #
 <svg width="500" height="500">
   <defs>
     <mask id="mask-sc0-padding-bg">
-      <rect width="100%" height="100%" fill="white"></rect>
+      <rect x="50" y="50" width="400" height="400" fill="white"></rect>
       <rect x="50" y="50" width="400" height="400" fill="black"></rect>
     </mask>
     <clipPath id="clip-sc0-data">

diff --git a/test/sandbox/src/examples/SelectPolygon.svelte b/test/sandbox/src/examples/SelectPolygon.svelte
@@ -75,7 +75,7 @@
   let highlightLine
 </script>
 
-<Graphic width={500} height={500}>
+<Graphic width={500} height={500} padding={30}>
 
   <Section
     bind:this={section}

diff --git a/test/sandbox/src/examples/SelectRectangle.svelte b/test/sandbox/src/examples/SelectRectangle.svelte
@@ -79,11 +79,10 @@
   let highlightLine
 </script>
 
-<Graphic width={500} height={500}>
+<Graphic width={500} height={500} padding={30}>
 
   <Section
     bind:this={section}
-    padding={30}
     scaleX={scaleLinear().domain([0, 10])}
     scaleY={scaleLinear().domain([0, 10])}
     {onMousedown}