Refactor mask with dynamic svg shape + Add rounded prop

Author: qboot

.gitignore

@@ -3,3 +3,4 @@ npm-debug.log
 /dist
 /lib
 .idea
+.DS_Store

README.md

@@ -79,6 +79,7 @@ const steps = [
 | `onRequestClose` | Function triggered to close | `func` |  |  |
 | `prevButton` | Prev navigation button text | `node` |  |  |
 | `prevStep` | Override default `prevStep` function to use a custom one | `func` |  |  |
+| `rounded` | Beautify helper + mask with border-radius (in px) | `number` | `0` |  |
 | `scrollDuration` | Smooth scroll duration when positioning the target element | `number` | `1` |  |
 | `scrollOffset` | Offset when positioning the target element | `number` | calculates the vertical center of the page |  |
 | `showButtons` | Show **helper** navigation butons | `bool` | `true` |  |

docs/bundle.js

@@ -8,14 +8,10 @@ import {
   Close,
   Guide,
   Badge,
-  TopMask,
-  RightMask,
-  BottomMask,
-  LeftMask,
-  ElementMask,
   Controls,
   Navigation,
   Dot,
+  SvgMask,
 } from './components/index'
 import * as hx from './helpers'
 
@@ -64,6 +60,7 @@ class TourPortal extends Component {
     disableInteraction: PropTypes.bool,
     disableNavigationDotsInteraction: PropTypes.bool,
     disableKeyboardNavigation: PropTypes.bool,
+    rounded: PropTypes.number,
   }
 
   static defaultProps = {
@@ -81,6 +78,7 @@ class TourPortal extends Component {
     maskSpace: 10,
     updateDelay: 1,
     disableInteraction: false,
+    rounded: 0,
   }
 
   constructor() {
@@ -271,7 +269,7 @@ class TourPortal extends Component {
 
   maskClickHandler = e => {
     const { closeWithMask, onRequestClose } = this.props
-    if (closeWithMask) {
+    if (closeWithMask && !e.target.classList.contains(CN.mask.disableInteraction)) {
       onRequestClose(e)
     }
   }
@@ -366,6 +364,7 @@ class TourPortal extends Component {
       disableNavigationDotsInteraction,
       nextStep,
       prevStep,
+      rounded,
     } = this.props
 
     const {
@@ -394,45 +393,20 @@ class TourPortal extends Component {
             className={cn(CN.mask.base, {
               [CN.mask.isOpen]: isOpen,
             })}>
-            <TopMask
-              targetTop={targetTop}
-              padding={maskSpace}
-              className={maskClassName}
-            />
-            <RightMask
-              targetTop={targetTop}
-              targetLeft={targetLeft}
-              targetWidth={targetWidth}
-              targetHeight={targetHeight}
+            <SvgMask
               windowWidth={windowWidth}
-              padding={maskSpace}
-              className={maskClassName}
-            />
-            <BottomMask
-              targetHeight={targetHeight}
-              targetTop={targetTop}
               windowHeight={windowHeight}
-              padding={maskSpace}
-              className={maskClassName}
-            />
-            <LeftMask
+              targetWidth={targetWidth}
               targetHeight={targetHeight}
               targetTop={targetTop}
               targetLeft={targetLeft}
               padding={maskSpace}
+              rounded={rounded}
               className={maskClassName}
+              disableInteraction={disableInteraction}
+              disableInteractionClassName={CN.mask.disableInteraction}
             />
           </div>
-          {disableInteraction && (
-            <ElementMask
-              targetTop={targetTop}
-              targetLeft={targetLeft}
-              targetWidth={targetWidth}
-              targetHeight={targetHeight}
-              padding={maskSpace}
-              className={highlightedMaskClassName}
-            />
-          )}
           <Guide
             innerRef={c => (this.helper = c)}
             targetHeight={targetHeight}
@@ -450,6 +424,7 @@ class TourPortal extends Component {
             tabIndex={-1}
             current={current}
             style={steps[current].style ? steps[current].style : {}}
+            rounded={rounded}
             className={cn(CN.helper.base, className, {
               [CN.helper.isOpen]: isOpen,
             })}>
@@ -532,6 +507,7 @@ const CN = {
   mask: {
     base: 'reactour__mask',
     isOpen: 'reactour__mask--is-open',
+    disableInteraction: 'reactour__mask--disable-interaction',
   },
   helper: {
     base: 'reactour__helper',

docs/bundle.js.map

@@ -16,6 +16,7 @@ const Guide = styled.div`
   min-width: 150px;
   outline: 0;
   padding-right: 40px;
+  border-radius: ${props => props.rounded}px;
 
   transform: ${props => {
     const {

src/TourPortal.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import styled from 'styled-components'
+import * as hx from '../helpers'
+
+const SvgMask = styled.div`
+  opacity: 0.7;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 100%;
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+`
+
+export default ({
+  windowWidth,
+  windowHeight,
+  targetWidth,
+  targetHeight,
+  targetTop,
+  targetLeft,
+  padding,
+  rounded,
+  disableInteraction,
+  disableInteractionClassName
+}) => {
+  const width = hx.safe(targetWidth + padding * 2)
+  const height = hx.safe(targetHeight + padding * 2)
+  const top = hx.safe(targetTop - padding)
+  const left = hx.safe(targetLeft - padding)
+
+  return (
+    <SvgMask>
+      <svg width={windowWidth} height={windowHeight} xmlns="http://www.w3.org/2000/svg">
+        <defs>
+            <mask id="mask-main">
+              <rect x={0} y={0} width={windowWidth} height={windowHeight} fill="white" />
+              <rect x={left} y={top} width={width} height={height} fill="black" />
+              {/* top left rounded corner */}
+              <rect x={left - 1} y={top - 1} width={rounded} height={rounded} fill="white" />
+              <circle cx={left + rounded} cy={top + rounded} r={rounded} fill="black" />
+              {/* top right rounded corner */}
+              <rect x={left + width - rounded + 1} y={top - 1} width={rounded} height={rounded} fill="white" />
+              <circle cx={left + width - rounded} cy={top + rounded} r={rounded} fill="black" />
+              {/* bottom left rounded corner */}
+              <rect x={left - 1} y={top + height - rounded + 1} width={rounded} height={rounded} fill="white" />
+              <circle cx={left + rounded} cy={top + height - rounded} r={rounded} fill="black" />
+              {/* bottom right rounded corner */}
+              <rect x={left + width - rounded + 1} y={top + height - rounded + 1} width={rounded} height={rounded} fill="white" />
+              <circle cx={left + width - rounded} cy={top + height - rounded} r={rounded} fill="black "/>
+            </mask>
+            <clipPath id="clip-path">
+              {/* top */}
+              <rect x={0} y={0} width={windowWidth} height={top} />
+              {/* left */}
+              <rect x={0} y={top} width={left} height={height} />
+              {/* right */}
+              <rect x={targetLeft + targetWidth + padding} y={top} width={hx.safe(windowWidth - targetWidth - left)} height={height} />
+              {/* bottom */}
+              <rect x={0} y={targetTop + targetHeight + padding} width={windowWidth} height={hx.safe(windowHeight - targetHeight - top)} />
+            </clipPath>
+        </defs>
+        <rect x={0} y={0} width={windowWidth} height={windowHeight} fill="#000000" mask="url(#mask-main)" />
+        <rect x={0} y={0} width={windowWidth} height={windowHeight} fill="#000000" clipPath="url(#clip-path)" pointerEvents="auto" />
+        <rect
+          x={left}
+          y={top}
+          width={width}
+          height={height}
+          pointerEvents="auto"
+          fill="transparent"
+          display={disableInteraction ? "block" : "none"}
+          className={disableInteractionClassName}
+        />
+      </svg>
+    </SvgMask>
+  )
+}

src/components/Guide.js

@@ -2,11 +2,7 @@ export { default as Arrow } from './Arrow'
 export { default as Close } from './Close'
 export { default as Guide } from './Guide'
 export { default as Badge } from './Badge'
-export { TopMask } from './Masks'
-export { RightMask } from './Masks'
-export { BottomMask } from './Masks'
-export { LeftMask } from './Masks'
-export { ElementMask } from './Masks'
 export { default as Controls } from './Controls'
 export { default as Navigation } from './Navigation'
 export { default as Dot } from './Dot'
+export { default as SvgMask } from './SvgMask'

src/components/Masks.js

@@ -45,6 +45,7 @@ class App extends Component {
           isOpen={isTourOpen}
           maskClassName="mask"
           className="helper"
+          rounded={5}
         />
       </div>
     )
@@ -62,7 +63,7 @@ const tourConfig = [
   },
   {
     selector: '[data-tut="reactour__copy"]',
-    content: `Keep in mind that you could try and test everithing during the Tour. 
+    content: `Keep in mind that you could try and test everything during the Tour.
       For example, try selecting the highlighted text…`,
   },
   {