diff --git a/src/components/controls/DrawingToolSettings.tsx b/src/components/controls/DrawingToolSettings.tsx index 0ac1dff..b36fa81 100644 --- a/src/components/controls/DrawingToolSettings.tsx +++ b/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 })} /> + onSettingChange({ useShapeFill })} + /> ); } diff --git a/src/components/controls/shared/ShapeFillToggle.tsx b/src/components/controls/shared/ShapeFillToggle.tsx new file mode 100644 index 0000000..eafb51e --- /dev/null +++ b/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 ( + onShapeFillChange(!useShapeFill)} + > + {useShapeFill ? : } + + ); +} + +export default ShapeFillToggle; diff --git a/src/components/konva/Drawing.tsx b/src/components/konva/Drawing.tsx index b780efb..897e109 100644 --- a/src/components/konva/Drawing.tsx +++ b/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 ( @@ -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) { @@ -75,7 +78,6 @@ function Drawing({ drawing, ...props }: DrawingProps) { return ( handleShapeOver(shape, true)} onMouseUp={eraseHoveredShapes} onTouchEnd={eraseHoveredShapes} - strokeWidth={ - shape.type === "path" || shape.shapeType === "line" - ? gridStrokeWidth * shape.strokeWidth - : 0 - } + strokeWidth={gridStrokeWidth * shape.strokeWidth} /> ); } diff --git a/src/icons/ShapeFillOffIcon.tsx b/src/icons/ShapeFillOffIcon.tsx new file mode 100644 index 0000000..a7abeb1 --- /dev/null +++ b/src/icons/ShapeFillOffIcon.tsx @@ -0,0 +1,16 @@ +function ShapeFillOffIcon() { + return ( + + + + + ); +} + +export default ShapeFillOffIcon; diff --git a/src/icons/ShapeFillOnIcon.tsx b/src/icons/ShapeFillOnIcon.tsx new file mode 100644 index 0000000..49834ab --- /dev/null +++ b/src/icons/ShapeFillOnIcon.tsx @@ -0,0 +1,16 @@ +function ShapeFillOnIcon() { + return ( + + + + + ); +} + +export default ShapeFillOnIcon; diff --git a/src/settings.ts b/src/settings.ts index 5185610..3666b06 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -69,6 +69,14 @@ function loadVersions(settings: Settings) { ...prev, select: { type: "rectangle" }, })); + // v1.10.0 - Add use shape fill setting + settings.version(9, (prev: any) => ({ + ...prev, + drawing: { + ...prev.drawing, + useShapeFill: true, + }, + })); } export function getSettings() { diff --git a/src/shortcuts.ts b/src/shortcuts.ts index 677852c..4f596e1 100644 --- a/src/shortcuts.ts +++ b/src/shortcuts.ts @@ -74,6 +74,7 @@ const shortcuts: Record = { drawTriangle: (event) => singleKey(event, "t"), drawErase: (event) => singleKey(event, "e"), drawBlend: (event) => singleKey(event, "o"), + drawFill: (event) => singleKey(event, "g"), // Fog tool fogPolygon: (event) => singleKey(event, "p"), fogRectangle: (event) => singleKey(event, "r"), diff --git a/src/types/Drawing.ts b/src/types/Drawing.ts index 005469e..f0c0713 100644 --- a/src/types/Drawing.ts +++ b/src/types/Drawing.ts @@ -14,6 +14,7 @@ export type DrawingToolSettings = { type: DrawingToolType; color: Color; useBlending: boolean; + useShapeFill: boolean; }; export type PointsData = {