Support locking tables on canvas (#475)

* Lock tables

* Add lock flag in addTable

src/components/EditorCanvas/Canvas.jsx

@@ -104,6 +104,8 @@ export default function Canvas() {
     const elements = [];
 
     tables.forEach((table) => {
+      if (table.locked) return;
+
       if (
         isInsideRect(
           {
@@ -319,6 +321,9 @@ export default function Canvas() {
         },
       }));
     } else if (dragging.element === ObjectType.TABLE && dragging.id !== null) {
+      const table = tables.find((t) => t.id === dragging.id);
+      if (table.locked) return;
+
       updateTable(dragging.id, {
         x: pointer.spaces.diagram.x + grabOffset.x,
         y: pointer.spaces.diagram.y + grabOffset.y,

src/components/EditorCanvas/Table.jsx

@@ -12,6 +12,8 @@ import {
   IconMinus,
   IconDeleteStroked,
   IconKeyStroked,
+  IconLock,
+  IconUnlock,
 } from "@douyinfe/semi-icons";
 import { Popover, Tag, Button, SideSheet } from "@douyinfe/semi-ui";
 import { useLayout, useSettings, useDiagram, useSelect } from "../../hooks";
@@ -32,7 +34,7 @@ export default function Table(props) {
     setLinkingLine,
   } = props;
   const { layout } = useLayout();
-  const { deleteTable, deleteField } = useDiagram();
+  const { deleteTable, deleteField, updateTable } = useDiagram();
   const { settings } = useSettings();
   const { t } = useTranslation();
   const { selectedElement, setSelectedElement, bulkSelectedElements } =
@@ -56,6 +58,9 @@ export default function Table(props) {
     );
   }, [selectedElement, tableData, bulkSelectedElements]);
 
+  const lockUnlockTable = () =>
+    updateTable(tableData.id, { locked: !tableData.locked });
+
   const openEditor = () => {
     if (!layout.sidebar) {
       setSelectedElement((prev) => ({
@@ -109,18 +114,26 @@ export default function Table(props) {
               settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
             }`}
           >
-            <div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap">
+            <div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
               {tableData.name}
             </div>
             <div className="hidden group-hover:block">
-              <div className="flex justify-end items-center mx-2">
+              <div className="flex justify-end items-center mx-2 space-x-1.5">
+                <Button
+                  icon={tableData.locked ? <IconLock /> : <IconUnlock />}
+                  size="small"
+                  theme="solid"
+                  style={{
+                    backgroundColor: "#2f68adb3",
+                  }}
+                  onClick={lockUnlockTable}
+                />
                 <Button
                   icon={<IconEdit />}
                   size="small"
                   theme="solid"
                   style={{
                     backgroundColor: "#2f68adb3",
-                    marginRight: "6px",
                   }}
                   onClick={openEditor}
                 />

src/context/DiagramContext.jsx

@@ -32,6 +32,7 @@ export default function DiagramContextProvider({ children }) {
           name: `table_${prev.length}`,
           x: transform.pan.x,
           y: transform.pan.y,
+          locked: false,
           fields: [
             {
               name: "id",

src/data/schemas.js

@@ -38,6 +38,7 @@ export const tableSchema = {
       },
     },
     comment: { type: "string" },
+    locked: { type: "boolean" },
     indices: {
       type: "array",
       items: {