feat(SimpleMarkerSymbol): add outline styles in 2D

Refs: #33
sagewall · Oct 23, 2023 · 671e38f · 671e38f
1 parent 75b3e59
commit 671e38f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -218,6 +218,7 @@ const SimpleMarkerSymbolShell = () => {
                 handleStyleChange={handleStyleChange}
                 handleXoffsetChange={handleXoffsetChange}
                 handleYoffsetChange={handleYoffsetChange}
+                sceneView={sceneView}
               />
             </div>
           </CalcitePanel>