From 671e38f2605373d1763b73a48012416f3afdf24d Mon Sep 17 00:00:00 2001
From: Sage Wall <swall@esri.com>
Date: Fri, 6 Oct 2023 09:25:13 -0600
Subject: [PATCH] feat(SimpleMarkerSymbol): add outline styles in 2D

Refs: #33
---
 src/components/SimpleLineSymbolForm.tsx    | 9 ++++++++-
 src/components/SimpleMarkerSymbolForm.tsx  | 6 ++++--
 src/components/SimpleMarkerSymbolShell.tsx | 1 +
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/SimpleLineSymbolForm.tsx b/src/components/SimpleLineSymbolForm.tsx
index a601fbc..21d46e4 100644
--- a/src/components/SimpleLineSymbolForm.tsx
+++ b/src/components/SimpleLineSymbolForm.tsx
@@ -8,7 +8,7 @@ import {
   CalciteOption,
   CalciteSelect
 } from "@esri/calcite-components-react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import LineSymbolMarkerForm from "./LineSymbolMarkerForm";
 import { CAP_OPTIONS, JOIN_OPTIONS, LINE_STYLE_OPTIONS } from "./lib/constants";
 import { blockStyles, labelStyles } from "./lib/styles";
@@ -52,6 +52,13 @@ const SimpleLineSymbolForm = ({
   let markerBlock;
   let styleBlock;
 
+  useEffect(() => {
+    if (solidOnly) {
+      setStyle("solid");
+      handleStyleChange("solid");
+    }
+  }, [solidOnly]);
+
   if (showMarker) {
     markerBlock = (
       <CalciteBlock
diff --git a/src/components/SimpleMarkerSymbolForm.tsx b/src/components/SimpleMarkerSymbolForm.tsx
index f506e6f..65ed295 100644
--- a/src/components/SimpleMarkerSymbolForm.tsx
+++ b/src/components/SimpleMarkerSymbolForm.tsx
@@ -29,6 +29,7 @@ interface Props {
   handleStyleChange: (value: InstanceType<typeof SimpleMarkerSymbol>["style"]) => void;
   handleXoffsetChange: (value: string) => void;
   handleYoffsetChange: (value: string) => void;
+  sceneView: boolean;
 }
 
 const SimpleMarkerSymbolForm = ({
@@ -44,7 +45,8 @@ const SimpleMarkerSymbolForm = ({
   handleSizeChange,
   handleStyleChange,
   handleXoffsetChange,
-  handleYoffsetChange
+  handleYoffsetChange,
+  sceneView
 }: Props) => {
   const [angle, setAngle] = useState(0);
   const [color, setColor] = useState("#007ac2");
@@ -94,7 +96,7 @@ const SimpleMarkerSymbolForm = ({
           handleStyleChange={handleOutlineStyleChange}
           handleWidthChange={handleOutlineWidthChange}
           showMarker={false}
-          solidOnly={true}
+          solidOnly={sceneView}
         />
       </CalciteBlock>
       <CalciteLabel layout="default" style={labelStyles}>
diff --git a/src/components/SimpleMarkerSymbolShell.tsx b/src/components/SimpleMarkerSymbolShell.tsx
index 2e05730..2a5a835 100644
--- a/src/components/SimpleMarkerSymbolShell.tsx
+++ b/src/components/SimpleMarkerSymbolShell.tsx
@@ -218,6 +218,7 @@ const SimpleMarkerSymbolShell = () => {
                 handleStyleChange={handleStyleChange}
                 handleXoffsetChange={handleXoffsetChange}
                 handleYoffsetChange={handleYoffsetChange}
+                sceneView={sceneView}
               />
             </div>
           </CalcitePanel>