Show grid setting

src/components/canvas.jsx

@@ -311,6 +311,8 @@ export default function Canvas(props) {
             cursor: cursor,
           }}
         >
+          {settings.showGrid && (
+            <>
               <defs>
                 <pattern
                   id="pattern-circles"
@@ -337,6 +339,8 @@ export default function Canvas(props) {
                 height="100%"
                 fill="url(#pattern-circles)"
               ></rect>
+            </>
+          )}
           <g
             style={{
               transform: `scale(${settings.zoom})`,

src/components/control_panel.jsx

@@ -25,6 +25,7 @@ import {
   Input,
   Upload,
   Banner,
+  Toast,
 } from "@douyinfe/semi-ui";
 import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
@@ -277,7 +278,8 @@ export default function ControlPanel(props) {
       },
       Grid: {
         children: [],
-        function: () => {},
+        function: () =>
+          setSettings((prev) => ({ ...prev, showGrid: !prev.showGrid })),
       },
       Sidebar: {
         children: [],
@@ -291,6 +293,7 @@ export default function ControlPanel(props) {
         children: [],
         function: () => {
           setSettings((prev) => ({ ...prev, strictMode: !prev.strictMode }));
+          Toast.success(`Stict mode is ${settings.strictMode ? "on" : "off"}.`);
         },
       },
       "Field summary": {
@@ -300,6 +303,9 @@ export default function ControlPanel(props) {
             ...prev,
             showFieldSummary: !prev.showFieldSummary,
           }));
+          Toast.success(
+            `Field summary is ${settings.showFieldSummary ? "off" : "on"}.`
+          );
         },
       },
       "Reset view": {

src/pages/editor.jsx

@@ -40,6 +40,7 @@ export default function Editor(props) {
     strictMode: false,
     showFieldSummary: true,
     zoom: 1,
+    showGrid: true,
   });
 
   const dragHandler = (e) => {