import { useEffect, useState } from "react"; import logo_light from "../assets/logo_light_46.png"; import logo_dark from "../assets/logo_dark_46.png"; import { AutoComplete, Button } from "@douyinfe/semi-ui"; import { IconSearch, IconSun, IconMoon } from "@douyinfe/semi-icons"; const shortcuts = [ { shortcut: "CTRL+S", title: "Save diagram", description: "" }, { shortcut: "CTRL+Shift+S", title: "Save diagram as", description: "" }, { shortcut: "CTRL+O", title: "Open a diagram", description: "Load a saved diagram", }, { shortcut: "CTRL+C", title: "Copy selected element", description: "" }, { shortcut: "CTRL+V", title: "Paste selected element", description: "" }, { shortcut: "CTRL+X", title: "Cut selected element", description: "" }, { shortcut: "CTRL+D", title: "Duplicate selected element", description: "" }, { shortcut: "DEL", title: "Delete selected element", description: "" }, { shortcut: "CTRL+E", title: "Edit selected element", description: "" }, { shortcut: "CTRL+I", title: "Import a diagram", description: "Import a diagram by uploadng a valid json or dbb file.", }, { shortcut: "CTRL+Z", title: "Undo" }, { shortcut: "CTRL+Y", title: "Redo" }, { shortcut: "CTRL+SHIFT+M", title: "Enable/disable strict mode", description: "Disabling strict mode entails that the diagram will not undergo error or inconsistency checks.", }, { shortcut: "CTRL+SHIFT+F", title: "Enable/disable field summaries", description: "Disabling field summaries will prevent the display of details for each field in the table when hovered over.", }, { shortcut: "CTRL+SHIFT+G", title: "Show/hide grid" }, { shortcut: "CTRL+ALT+C", title: "Copy as image", description: "Save the canvas as an image to the clipboard.", }, { shortcut: "CTRL+R", title: "Reset view", description: "Resetting view will set diagram pan to (0, 0).", }, { shortcut: "CTRL+UP / Wheel up", title: "Zoom in" }, { shortcut: "CTRL+DOWN / Wheel down", title: "Zoom out" }, { shortcut: "CTRL+H", title: "Open shortcuts" }, ]; export default function Shortcuts() { const [theme, setTheme] = useState(""); const [value, setValue] = useState(""); const [filteredResult, setFilteredResult] = useState( shortcuts.map((t) => { return t.shortcut; }) ); const handleStringSearch = (value) => { setFilteredResult( shortcuts .filter( (i) => i.shortcut.toLowerCase().includes(value.toLowerCase()) || i.title.toLowerCase().includes(value.toLowerCase()) ) .map((i) => i.shortcut) ); }; useEffect(() => { const t = localStorage.getItem("theme"); setTheme(t); if (t === "dark") { const body = document.body; if (body.hasAttribute("theme-mode")) { body.setAttribute("theme-mode", "dark"); } } else { const body = document.body; if (body.hasAttribute("theme-mode")) { body.setAttribute("theme-mode", "light"); } } document.title = "Shortcuts | drawDB"; document.body.setAttribute("class", "theme"); }, [setTheme]); const changeTheme = () => { const body = document.body; const t = body.getAttribute("theme-mode"); if (t === "dark") { if (body.hasAttribute("theme-mode")) { body.setAttribute("theme-mode", "light"); setTheme("light"); } } else { if (body.hasAttribute("theme-mode")) { body.setAttribute("theme-mode", "dark"); setTheme("dark"); } } }; return ( <>