From 1bfd8d1bbaf699510716738d8077eb7bb2c9713a Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Mon, 27 Sep 2021 08:00:57 -0400
Subject: [PATCH] Add a black & white button. (#228)

This adds a "B&W" button to the colors area in the cluster and mandala pages. Clicking it will reset the background, stroke and fill colors to their monochromatic defaults.

I'm calling the button "B&W" for now to minimize the amount of space the button takes up, since I'd like to add at least one more to that area.  At some point we might want to use a UI that scales a bit better, like a dropdown button.
---
 lib/svg-composition-context.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/lib/svg-composition-context.tsx b/lib/svg-composition-context.tsx
index 03e703e..46a7fa7 100644
--- a/lib/svg-composition-context.tsx
+++ b/lib/svg-composition-context.tsx
@@ -34,8 +34,26 @@ export function CompositionContextWidget<T extends SvgCompositionContext>({
   onChange,
   children,
 }: CompositionContextWidgetProps<T>): JSX.Element {
+  const resetColors = () => {
+    const { background, stroke, fill } = DEFAULT_CONTEXT;
+    onChange({ ...ctx, background, stroke, fill });
+  };
+  const extraButtons = (
+    <>
+      <button
+        onClick={resetColors}
+        title="Reset colors to their black &amp; white defaults"
+      >
+        B&amp;W
+      </button>{" "}
+    </>
+  );
   return (
-    <SymbolContextWidget ctx={ctx} onChange={onChange}>
+    <SymbolContextWidget
+      ctx={ctx}
+      onChange={onChange}
+      extraButtons={extraButtons}
+    >
       {children}
       <ColorWidget
         label="Background"