Show grid setting

src/components/canvas.jsx

@@ -311,32 +311,36 @@ export default function Canvas(props) {
             cursor: cursor,
           }}
         >
-          <defs>
+          {settings.showGrid && (
-            <pattern
+            <>
-              id="pattern-circles"
+              <defs>
-              x="0"
+                <pattern
-              y="0"
+                  id="pattern-circles"
-              width="24"
+                  x="0"
-              height="24"
+                  y="0"
-              patternUnits="userSpaceOnUse"
+                  width="24"
-              patternContentUnits="userSpaceOnUse"
+                  height="24"
-            >
+                  patternUnits="userSpaceOnUse"
-              <circle
+                  patternContentUnits="userSpaceOnUse"
-                id="pattern-circle"
+                >
-                cx="4"
+                  <circle
-                cy="4"
+                    id="pattern-circle"
-                r="0.85"
+                    cx="4"
-                fill="rgb(99, 152, 191)"
+                    cy="4"
-              ></circle>
+                    r="0.85"
-            </pattern>
+                    fill="rgb(99, 152, 191)"
-          </defs>
+                  ></circle>
-          <rect
+                </pattern>
-            x="0"
+              </defs>
-            y="0"
+              <rect
-            width="100%"
+                x="0"
-            height="100%"
+                y="0"
-            fill="url(#pattern-circles)"
+                width="100%"
-          ></rect>
+                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) => {