Add shape fill option to drawings

src/components/controls/DrawingToolSettings.tsx

@@ -7,6 +7,7 @@ import RadioIconButton from "../RadioIconButton";
 import ColorControl from "./shared/ColorControl";
 import AlphaBlendToggle from "./shared/AlphaBlendToggle";
 import ToolSection from "./shared/ToolSection";
+import ShapeFillToggle from "./shared/ShapeFillToggle";
 
 import BrushIcon from "../../icons/BrushToolIcon";
 import BrushPaintIcon from "../../icons/BrushPaintIcon";
@@ -59,6 +60,8 @@ function DrawingToolSettings({
       onSettingChange({ type: "erase" });
     } else if (shortcuts.drawBlend(event)) {
       onSettingChange({ useBlending: !settings.useBlending });
+    } else if (shortcuts.drawFill(event)) {
+      onSettingChange({ useShapeFill: !settings.useShapeFill });
     }
   }
   useKeyboard(handleKeyDown);
@@ -148,6 +151,10 @@ function DrawingToolSettings({
         useBlending={settings.useBlending}
         onBlendingChange={(useBlending) => onSettingChange({ useBlending })}
       />
+      <ShapeFillToggle
+        useShapeFill={settings.useShapeFill}
+        onShapeFillChange={(useShapeFill) => onSettingChange({ useShapeFill })}
+      />
     </Flex>
   );
 }

src/components/controls/shared/ShapeFillToggle.tsx

@@ -0,0 +1,28 @@
+import { IconButton } from "theme-ui";
+
+import ShapeFillOnIcon from "../../../icons/ShapeFillOnIcon";
+import ShapeFillOffIcon from "../../../icons/ShapeFillOffIcon";
+
+type ShapeFillToggleProps = {
+  useShapeFill: boolean;
+  onShapeFillChange: (useShapeFill: boolean) => void;
+};
+
+function ShapeFillToggle({
+  useShapeFill,
+  onShapeFillChange,
+}: ShapeFillToggleProps) {
+  return (
+    <IconButton
+      aria-label={
+        useShapeFill ? "Disable Shape Fill (G)" : "Enable Shape Fill (G)"
+      }
+      title={useShapeFill ? "Disable Shape Fill (G)" : "Enable Shape Fill (G)"}
+      onClick={() => onShapeFillChange(!useShapeFill)}
+    >
+      {useShapeFill ? <ShapeFillOnIcon /> : <ShapeFillOffIcon />}
+    </IconButton>
+  );
+}
+
+export default ShapeFillToggle;

src/components/konva/Drawing.tsx

@@ -21,6 +21,7 @@ function Drawing({ drawing, ...props }: DrawingProps) {
 
   const defaultProps = {
     fill: colors[drawing.color] || drawing.color,
+    stroke: colors[drawing.color] || drawing.color,
     opacity: drawing.blend ? 0.5 : 1,
     id: drawing.id,
   };
@@ -29,7 +30,6 @@ function Drawing({ drawing, ...props }: DrawingProps) {
     return (
       <Line
         points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
-        stroke={colors[drawing.color] || drawing.color}
         tension={0.5}
         closed={drawing.pathType === "fill"}
         fillEnabled={drawing.pathType === "fill"}
@@ -47,6 +47,7 @@ function Drawing({ drawing, ...props }: DrawingProps) {
           y={drawing.data.y * mapHeight}
           width={drawing.data.width * mapWidth}
           height={drawing.data.height * mapHeight}
+          fillEnabled={props.strokeWidth === 0}
           {...defaultProps}
           {...props}
         />
@@ -58,6 +59,7 @@ function Drawing({ drawing, ...props }: DrawingProps) {
           x={drawing.data.x * mapWidth}
           y={drawing.data.y * mapHeight}
           radius={drawing.data.radius * minSide}
+          fillEnabled={props.strokeWidth === 0}
           {...defaultProps}
           {...props}
         />
@@ -67,6 +69,7 @@ function Drawing({ drawing, ...props }: DrawingProps) {
         <Line
           points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
           closed={true}
+          fillEnabled={props.strokeWidth === 0}
           {...defaultProps}
           {...props}
         />
@@ -75,7 +78,6 @@ function Drawing({ drawing, ...props }: DrawingProps) {
       return (
         <Line
           points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
-          stroke={colors[drawing.color] || drawing.color}
           lineCap="round"
           {...defaultProps}
           {...props}

src/components/tools/DrawingTool.tsx

@@ -127,7 +127,8 @@ function DrawingTool({
           type: "shape",
           shapeType: type,
           data: getDefaultShapeData(type, brushPosition),
-          strokeWidth: toolSettings.type === "line" ? 1 : 0,
+          strokeWidth:
+            toolSettings.type === "line" || !toolSettings.useShapeFill ? 1 : 0,
           ...commonShapeData,
         } as Shape);
       }
@@ -237,11 +238,7 @@ function DrawingTool({
         onTouchStart={() => handleShapeOver(shape, true)}
         onMouseUp={eraseHoveredShapes}
         onTouchEnd={eraseHoveredShapes}
-        strokeWidth={
-          shape.type === "path" || shape.shapeType === "line"
-            ? gridStrokeWidth * shape.strokeWidth
-            : 0
-        }
+        strokeWidth={gridStrokeWidth * shape.strokeWidth}
       />
     );
   }