Fix outline layer rendering on top, and outline opacity prop name

Author: 0xgreenapple

src/components/ShapeBase.tsx

@@ -33,7 +33,7 @@ const ShapeBase = forwardRef<SVGSVGElement, ShapeProps>((props, ref) => {
     outlineCap,
     outlineJoin,
     outlineColor,
-    strokeOpacity,
+    outlineOpacity,
     ...rest
   } = props;
 
@@ -53,10 +53,20 @@ const ShapeBase = forwardRef<SVGSVGElement, ShapeProps>((props, ref) => {
       style={{
         overflow: outline ? "visible" : "initial",
       }}
-      fillOpacity={strokeOpacity ? opacity : undefined}
-      opacity={strokeOpacity ? undefined : opacity}
+      fillOpacity={outlineOpacity ? opacity : undefined}
+      opacity={outlineOpacity ? undefined : opacity}
       {...rest}
       className={`${defaultClassName} ${shapeId} ${className || ""}`}>
+      {props.outline && (
+        <Outline
+          shape={shape}
+          outline={outline as number}
+          outlineFill={outlineColor}
+          outlineJoin={outlineJoin}
+          outlineCap={outlineCap}
+          opacity={outlineOpacity}
+        />
+      )}
       <ShapeMask
         shape={shape}
         noise={noise}
@@ -74,16 +84,6 @@ const ShapeBase = forwardRef<SVGSVGElement, ShapeProps>((props, ref) => {
           noiseScale={typeof noise === "number" ? defaultNoise : undefined}
         />
       )}
-      {props.outline && (
-        <Outline
-          shape={shape}
-          outline={outline as number}
-          outlineColor={outlineColor}
-          outlineJoin={outlineJoin}
-          outlineCap={outlineCap}
-          opacity={strokeOpacity}
-        />
-      )}
     </svg>
   );
 });

src/components/ShapeMask.tsx

@@ -1,5 +1,5 @@
 import { Gradient, MaskProps, ShapeElementTypes } from "../lib/types";
-import React, { cloneElement, Fragment, ReactSVGElement } from "react";
+import React, { cloneElement, Fragment } from "react";
 import { angleToBoxCoords } from "../lib";
 import { resolveGradientStops } from "../lib/utils/shape";
 
@@ -8,7 +8,7 @@ export const ShapeMask = (props: MaskProps) => {
   let gradientBlur = props.blur;
   let gradientShapes: ShapeElementTypes | ShapeElementTypes[] =
     props.gradientShapes || [];
-  let shapeProp = props.shape;
+  const shapeProp = props.shape;
   let shapeElement: ShapeElementTypes;
 
   // Resolve mask gradient

src/components/ShapeOutline.tsx

@@ -5,14 +5,14 @@ export default function Outline(props: {
   opacity?: number | string;
   shape: MaskShape;
   outline: number | string;
-  outlineColor?: string;
+  outlineFill?: string;
   outlineJoin?: OutlineJoin;
   outlineCap?: OutlineCap;
 }) {
   const params = {
     fill: "none",
-    stroke: props.outlineColor || "#000",
-    strokeWidth: props.outline,
+    stroke: props.outlineFill || "#000",
+    strokeWidth: Number(props.outline) * 2,
     strokeLinejoin: props.outlineJoin || "bevel",
     strokeLinecap: props.outlineCap || "round",
     strokeOpacity: props.opacity || 1,

src/index.tsx

@@ -1,8 +1,11 @@
-export { getRandomShape } from "./lib/shape";
+export {default as ShapeBase} from "./components/ShapeBase";
+
+export { getRandomShape, createShapeComponent } from "./lib/shape";
 export * from "./CoolShape";
 export * from "./shapes";
 export * from "./dynamicImports";
 export { default as shapesData } from "./shapes/data";
 export * from "./gradients";
 export * from "./lib/types";
-export * from './lib/common';
+export * from './lib/common';
+

src/lib/types.tsx

@@ -76,6 +76,7 @@ export interface OutlineProps {
   outlineColor: string;
   outlineCap: OutlineCap;
   outlineJoin: OutlineJoin;
+  outlineOpacity: number | string
 }
 
 export type GradientProp =

stats.html

@@ -46,9 +46,9 @@ describe("Using create component function", () => {
       outlineColor: "red",
       outlineCap: "butt" as OutlineCap,
       outlineJoin: "mitter" as OutlineJoin,
-      strokeOpacity: 10,
+      outlineOpacity: 10,
     };
-    const query = `[fill="none"][stroke="red"][stroke-width="2"][stroke-linecap="butt"][stroke-opacity="10"][stroke-linejoin="mitter"]`;
+    const query = `[fill="none"][stroke="red"][stroke-width="4"][stroke-linecap="butt"][stroke-opacity="10"][stroke-linejoin="mitter"]`;
     const { getByTestId } = render(<Component data-testid={"shape"} {...outlineProps} />);
     const element = getByTestId("shape");
     // The shape component overflow sets to visible that make sure the outline doesn't clip