spatialnetworkslab · johsi-k · Mar 9, 2020 · Mar 10, 2020 · Mar 10, 2020 · Mar 10, 2020
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -4,7 +4,7 @@
 #
 version: 2.1
 orbs:
-  cypress: cypress-io/cypress@1.8.0
+  cypress: cypress-io/cypress@1.19.1
 jobs:
   unit_test:
     docker:
@@ -31,12 +31,12 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
 
       # run tests!
-      - run: yarn run test:unit
+      - run: npm run test:unit
 workflows:
   unit_and_integration:
     jobs:
       # - unit_test # running unit tests from cypress workspace to save time
       - cypress/run:
-          yarn: true
-          command: yarn run test:unit && yarn run test:integration
+          executor: cypress/browsers-chrome78-ff70
+          command: npm run test:unit && npm run test:integration
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/site/src/gallery/contour/.metadata b/site/src/gallery/contour/.metadata
@@ -1,2 +1,2 @@
-sandbox_id: c52mh
-hash: 0baf0e140a1e302351f040b41c88273f65637832
+sandbox_id: 0om4x
+hash: 6b5199d4b5175ddf6d0bf4cd070036ffa1875cdc
diff --git a/site/src/gallery/contour/App.svelte b/site/src/gallery/contour/App.svelte
@@ -8,12 +8,10 @@
   import {
     Graphic,
     Section,
-    Label,
     PointLayer,
     Polygon,
     XAxis,
     YAxis,
-    Title
   } from '@snlab/florence/src/index.js'
   import DataContainer from '@snlab/florence-datacontainer'
 
@@ -69,15 +67,7 @@
   {height}
 >
 
-  <!-- <Label
-    x={450}
-    y={10}
-    text={'Density Contours'} -->
-  />
-
-  <Section
-    {padding}
-  >  
+  <Section {padding} >  
     {#if done}
       {#each contours as c, i}
         <Polygon

diff --git a/src/components/Core/Section/Section.svelte b/src/components/Core/Section/Section.svelte
@@ -210,28 +210,34 @@
 </script>
 
 <defs>
-  <clipPath id={`clip-${sectionId}`}>
+  <mask id={`mask-${sectionId}-padding-bg`}>
     <rect
       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)} />
-  </clipPath>
-  <clipPath id={`clip-${sectionId}-data`}>
+      height={Math.abs(scaledCoordinates.y2 - scaledCoordinates.y1)}
+      fill="white" />
     <rect
       x={Math.min(...rangeX)}
       y={Math.min(...rangeY)}
       width={Math.abs(rangeX[0] - rangeX[1])}
       height={Math.abs(rangeY[0] - rangeY[1])}
-      fill="white" />
+      fill="black" />
+  </mask>
+  <clipPath id={`clip-${sectionId}-data`}>
+    <rect
+      x={Math.min(...rangeX)}
+      y={Math.min(...rangeY)}
+      width={Math.abs(rangeX[0] - rangeX[1])}
+      height={Math.abs(rangeY[0] - rangeY[1])} />
   </clipPath>
 </defs>
 
-<g class="section" clip-path={`url(#clip-${sectionId})`}>
+<g class="section">
   {#if paddingColor}
     <rect
       class="padding-background"
-      mask={`url(#clip-${sectionId}-data)`}
+      mask={`url(#mask-${sectionId}-padding-bg)`}
       width="100%"
       height="100%"
       fill={paddingColor} />

diff --git a/src/components/Core/Section/SectionContext/index.js b/src/components/Core/Section/SectionContext/index.js
@@ -4,7 +4,7 @@ import { writable } from 'svelte/store'
 
 class SectionContext {
   constructor ({ sectionId, rangeX, rangeY, scaleX, scaleY, padding, flipX, flipY, blockReindexing }) {
-    this._sectionId = sectionId
+    this.sectionId = sectionId
 
     this.rangeX = rangeX
     this.rangeY = rangeY

diff --git a/src/components/Core/Title/Title.svelte b/src/components/Core/Title/Title.svelte
@@ -63,6 +63,7 @@
   let xRange = $sectionContext.scaleX.range()
   let yRange = $sectionContext.scaleY.range()
   let totalFontSize
+  const clipped = false
 
   $: {
     if (usePadding === true) {
@@ -131,6 +132,7 @@
   fontFamily={titleFontFamily} fontSize={titleFontSize} fontWeight={titleFontWeight} rotation={titleRotation} anchorPoint={titleAnchorPoint}
   {transition} {onClick} {onMouseover} {onMouseout}
   {zoomIdentity} _asPolygon={false}
+  {clipped}
 />
 <!-- {/if} -->
 
@@ -147,5 +149,6 @@
   fontFamily={subtitleFontFamily} fontSize={subtitleFontSize} fontWeight={subtitleFontWeight} rotation={subtitleRotation} anchorPoint={subtitleAnchorPoint}
   {transition} {onClick} {onMouseover} {onMouseout}
   {zoomIdentity} _asPolygon={false}
+  {clipped}
 />
 <!-- {/if} -->
diff --git a/src/components/Guides/Axes/XAxis.svelte b/src/components/Guides/Axes/XAxis.svelte
@@ -62,7 +62,7 @@
 
   // Contexts
   const sectionContext = SectionContext.subscribe()
-  
+
   let xCoords
   let yCoords
   let tickPositions
@@ -77,6 +77,7 @@
   let axisHeight
   let labelAnchorPoint = 't'
   let scaleX
+  const clipped = false
 
   $: {
     scaleX = (typeof scale === 'undefined') ? $sectionContext.scaleX : scale;
@@ -105,29 +106,29 @@
   {#if baseLine}
     <Line 
       x={xCoords} y={yCoords} strokeWidth={baseLineWidth} opacity={baseLineOpacity} stroke={baseLineColor}
-      {zoomIdentity}
+      {zoomIdentity} {clipped}
     />
   {/if}
 
   {#if ticks}
-    <LineLayer 
+    <LineLayer
       x={tickXCoords} y={tickYCoords} strokeWidth={tickWidth} opacity={tickOpacity} stroke={tickColor}
-      {transition} {zoomIdentity}
+      {transition} {zoomIdentity} {clipped}
     />
     <LabelLayer
       x={tickLabelXCoords} y={tickLabelYCoords} text={tickLabelText} anchorPoint={labelAnchorPoint}
       rotation={labelRotate} fontFamily={labelFont} fontSize={labelFontSize}
       fontWeight={labelFontWeight} opacity={labelOpacity} fill={labelColor}
-      {transition} {zoomIdentity}
+      {transition} {zoomIdentity} {clipped}
     />
   {/if}
 
   {#if title.length > 0}
-    <Label 
+    <Label
       x={titleXCoord} y={titleYCoord} text={title} anchorPoint={titleAnchorPoint}
       rotation={titleRotation} fontFamily={titleFont} fontSize={titleFontSize}
       fontWeight={titleFontWeight} opacity={titleOpacity} fill={titleColor}
-      {zoomIdentity}
+      {zoomIdentity} {clipped}
     />
   {/if}
 

diff --git a/src/components/Guides/Axes/YAxis.svelte b/src/components/Guides/Axes/YAxis.svelte
@@ -77,6 +77,7 @@
   let axisWidth
   let labelAnchorPoint = 'r'
   let scaleY
+  const clipped = false
 
   $: {
     scaleY = (typeof scale === 'undefined') ? $sectionContext.scaleY : scale;
@@ -103,31 +104,31 @@
 <g class="y-axis">
 
   {#if baseLine}
-    <Line 
+    <Line
       x={xCoords} y={yCoords} strokeWidth={baseLineWidth} opacity={baseLineOpacity} stroke={baseLineColor}
-      {zoomIdentity}
+      {zoomIdentity} {clipped}
     />
   {/if}
 
   {#if ticks}
-    <LineLayer 
+    <LineLayer
       x={tickXCoords} y={tickYCoords} strokeWidth={tickWidth} opacity={tickOpacity} stroke={tickColor}
-      {transition} {zoomIdentity}
+      {transition} {zoomIdentity} {clipped}
     />
     <LabelLayer
       x={tickLabelXCoords} y={tickLabelYCoords} text={tickLabelText} anchorPoint={labelAnchorPoint}
       rotation={labelRotate} fontFamily={labelFont} fontSize={labelFontSize}
       fontWeight={labelFontWeight} opacity={labelOpacity} fill={labelColor}
-      {transition} {zoomIdentity}
+      {transition} {zoomIdentity} {clipped}
     />
   {/if}
 
   {#if title.length > 0}
-    <Label 
+    <Label
       x={titleXCoord} y={titleYCoord} text={title} anchorPoint={titleAnchorPoint}
       rotation={titleRotation} fontFamily={titleFont} fontSize={titleFontSize}
       fontWeight={titleFontWeight} opacity={titleOpacity} fill={titleColor}
-      {zoomIdentity}
+      {zoomIdentity} {clipped}
     />
   {/if}
 

diff --git a/src/components/Guides/Legends/DiscreteLegend.svelte b/src/components/Guides/Legends/DiscreteLegend.svelte
@@ -97,6 +97,7 @@
   let rangeCoordsY
   let xRange = $sectionContext.scaleX.range()
   let yRange = $sectionContext.scaleY.range()
+  const clipped = false
 
   let colorXStartCoords
   let colorXEndCoords
@@ -362,6 +363,7 @@
     {stroke}
     {strokeWidth}
     {zoomIdentity}
+    {clipped}
   />
 
   <LabelLayer
@@ -377,10 +379,11 @@
     fill={labelColor}
     {transition} 
     {zoomIdentity}
+    {clipped}
   />
 
   {#if title.length > 0}
-    <Label 
+    <Label
       x={ () => { return titleX } }
       y={ () => { return titleY } }
       text={title}
@@ -393,6 +396,7 @@
       fill={titleColor}
       {transition} 
       {zoomIdentity}
+      {clipped}
     />
   {/if}
 </g>
diff --git a/src/components/Guides/Legends/GradientLegend.svelte b/src/components/Guides/Legends/GradientLegend.svelte
@@ -104,6 +104,7 @@
   let rangeCoordsY
   let xRange = $sectionContext.scaleX.range()
   let yRange = $sectionContext.scaleY.range()
+  const clipped = false
 
   let colorGeoms
   let offsets
@@ -389,6 +390,7 @@
       {stroke}
       {strokeWidth}
       {zoomIdentity} 
+      {clipped}
   />
 
   <LabelLayer
@@ -404,6 +406,7 @@
       fill={labelColor}
       {transition} 
       {zoomIdentity}
+      {clipped}
   />
   {#if title.length > 0}
       <Label 
@@ -419,6 +422,7 @@
           fill={titleColor}
           {transition} 
           {zoomIdentity}
+          {clipped}
       />
   {/if}
 </g>
diff --git a/src/components/Marks/FuncLine/FuncLine.svelte b/src/components/Marks/FuncLine/FuncLine.svelte
@@ -60,6 +60,7 @@
   // Other
   export let zoomIdentity = undefined
   export let blockReindexing = false
+  export let clipped = true
 
   // Contexts
   const graphicContext = GraphicContext.subscribe()
@@ -213,7 +214,7 @@
 
 {#if $graphicContext.output() === 'svg'}
 
-  <path
+  <path clip-path={clipped ? `url(#clip-${$sectionContext.sectionId}-data)` : 'none'}
     class="line"
     d={generatePath($tr_screenGeometry)}
     fill="none"

diff --git a/src/components/Marks/Label/Label.svelte b/src/components/Marks/Label/Label.svelte
@@ -45,6 +45,7 @@
   // Other
   export let zoomIdentity = undefined
   export let blockReindexing = false
+  export let clipped = true
 </script>
 
 <Mark
@@ -59,4 +60,5 @@
   {onTouchdown} {onTouchup} {onTouchover} {onTouchout} {onTouchdrag}
   {onSelect} {onDeselect}
   {zoomIdentity} _asPolygon={false} {blockReindexing}
+  {clipped}
 />
diff --git a/src/components/Marks/Label/LabelLayer.svelte b/src/components/Marks/Label/LabelLayer.svelte
@@ -46,6 +46,7 @@
   export let key = undefined
   export let zoomIdentity = undefined
   export let blockReindexing = false
+  export let clipped = true
 </script>
 
 <Layer 
@@ -60,4 +61,5 @@
   {onTouchdown} {onTouchup} {onTouchover} {onTouchout} {onTouchdrag}
   {onSelect} {onDeselect}
   {key} {zoomIdentity} _asPolygon={false} {blockReindexing}
+  {clipped}
 />
diff --git a/src/components/Marks/Line/Line.svelte b/src/components/Marks/Line/Line.svelte
@@ -37,6 +37,7 @@
   export let interpolate = true
   export let zoomIdentity = undefined
   export let blockReindexing = false
+  export let clipped = true
 </script>
 
 <Mark 
@@ -48,4 +49,5 @@
   {onTouchdown} {onTouchup} {onTouchover} {onTouchout} {onTouchdrag}
   {onSelect} {onDeselect}
   {interpolate} {zoomIdentity} _asPolygon={false} {blockReindexing}
+  {clipped}
 />
diff --git a/src/components/Marks/Line/LineLayer.svelte b/src/components/Marks/Line/LineLayer.svelte
@@ -38,6 +38,7 @@
   export let interpolate = true
   export let zoomIdentity = undefined
   export let blockReindexing = false
+  export let clipped = true
 </script>
 
 <Layer 
@@ -49,4 +50,5 @@
   {onTouchdown} {onTouchup} {onTouchover} {onTouchout} {onTouchdrag}
   {onSelect} {onDeselect}
   {interpolate} {zoomIdentity} {key} _asPolygon={false} {blockReindexing}
+  {clipped}
 />