✨🚧Supported adding frame

cfdraw/.web/src/_settings.ts

@@ -59,7 +59,7 @@ export const reactPluginSettings: IMakePlugin<ReactPlugins>[] = [
       nodeConstraint: "none",
       renderInfo: {
         w: 256,
-        h: 120,
+        h: 200,
         offsetY: 120,
         src: ADD_ICON,
         tooltip: "add-new-stuff-tooltip",

cfdraw/.web/src/components/CFInput.tsx

@@ -4,7 +4,7 @@ import { Input, InputProps, UseNumberInputProps, useNumberInput } from "@chakra-
 import { themeStore } from "@/stores/theme";
 import CFTooltip from "./CFTooltip";
 
-interface ICFInput extends InputProps {
+export interface ICFInput extends InputProps {
   tooltip?: string;
   useNumberInputProps?: UseNumberInputProps;
 }

cfdraw/.web/src/lang/add.ts

@@ -6,6 +6,7 @@ export enum Add_Words {
   "upload-image-button" = "upload-image-button",
   "add-text-button" = "add-text-button",
   "add-blank-button" = "add-blank-button",
+  "add-frame-button" = "add-frame-button",
 }
 
 export const addLangRecords: Record<Lang, Record<Add_Words, string>> = {
@@ -15,12 +16,14 @@ export const addLangRecords: Record<Lang, Record<Add_Words, string>> = {
     [Add_Words["upload-image-button"]]: "上传图片",
     [Add_Words["add-text-button"]]: "添加文字",
     [Add_Words["add-blank-button"]]: "添加空白画布",
+    [Add_Words["add-frame-button"]]: "添加画框",
   },
   en: {
     [Add_Words["add-plugin-header"]]: "Add",
     [Add_Words["new-project-button"]]: "New Project",
     [Add_Words["upload-image-button"]]: "Upload Image",
     [Add_Words["add-text-button"]]: "Add Text",
     [Add_Words["add-blank-button"]]: "Add Blank Canvas",
+    [Add_Words["add-frame-button"]]: "Add Frame",
   },
 };

cfdraw/.web/src/lang/toast.ts

@@ -30,6 +30,8 @@ export enum Toast_Words {
   "add-text-error-message" = "add-text-error-message",
   "add-blank-success-message" = "add-blank-success-message",
   "add-blank-error-message" = "add-blank-error-message",
+  "add-frame-success-message" = "add-frame-success-message",
+  "add-frame-error-message" = "add-frame-error-message",
   "auto-arrange-no-need-message" = "auto-arrange-no-need-message",
   "submit-task-busy-message" = "submit-task-busy-message",
   "submit-task-success-message" = "submit-task-success-message",
@@ -76,6 +78,8 @@ export const toastLangRecords: Record<Lang, Record<Toast_Words, string>> = {
     [Toast_Words["add-text-error-message"]]: "添加文字时出了些问题",
     [Toast_Words["add-blank-success-message"]]: "添加空白画布成功",
     [Toast_Words["add-blank-error-message"]]: "添加空白画布时出了些问题",
+    [Toast_Words["add-frame-success-message"]]: "添加画框成功",
+    [Toast_Words["add-frame-error-message"]]: "添加画框时出了些问题",
     [Toast_Words["auto-arrange-no-need-message"]]: "当前节点无需整理",
     [Toast_Words["submit-task-busy-message"]]: "当前任务正在执行中，请稍候...",
     [Toast_Words["submit-task-success-message"]]: "任务提交成功",
@@ -121,6 +125,8 @@ export const toastLangRecords: Record<Lang, Record<Toast_Words, string>> = {
     [Toast_Words["add-text-error-message"]]: "Something is wrong when adding Text Node",
     [Toast_Words["add-blank-success-message"]]: "Blank Canvas added successfully",
     [Toast_Words["add-blank-error-message"]]: "Something is wrong when adding Blank Canvas",
+    [Toast_Words["add-frame-success-message"]]: "Frame added successfully",
+    [Toast_Words["add-frame-error-message"]]: "Something is wrong when adding Frame",
     [Toast_Words["auto-arrange-no-need-message"]]: "There is no need to arrange the Nodes",
     [Toast_Words["submit-task-busy-message"]]:
       "Current task is being executed, please wait for a while...",

cfdraw/.web/src/plugins/_react/AddPlugin.tsx

@@ -1,15 +1,16 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ButtonProps, Flex } from "@chakra-ui/react";
 
-import { getRandomHash } from "@carefree0910/core";
-import { langStore, translate } from "@carefree0910/business";
+import { Frame, getCenteredBBox, getRandomHash } from "@carefree0910/core";
+import { BoardStore, langStore, translate, useSafeExecute } from "@carefree0910/business";
 
 import type { IPlugin } from "@/schema/plugins";
 import { toastWord } from "@/utils/toast";
 import { globalEvent } from "@/utils/event";
 import {
   ADD_BLANK_ICON,
+  ADD_FRAME_ICON,
   ADD_IMAGE_ICON,
   ADD_PROJECT_ICON,
   ADD_TEXT_ICON,
@@ -20,6 +21,7 @@ import { Toast_Words } from "@/lang/toast";
 import { usePluginIsExpanded } from "@/stores/pluginsInfo";
 import { importMeta } from "@/actions/importMeta";
 import { getNewProject, loadLocalProject, saveCurrentProject } from "@/actions/manageProjects";
+import CFInput, { ICFInput } from "@/components/CFInput";
 import CFDivider from "@/components/CFDivider";
 import CFHeading from "@/components/CFHeading";
 import CFImageUploader from "@/components/CFImageUploader";
@@ -28,10 +30,26 @@ import { drawboardPluginFactory } from "../utils/factory";
 import { useClosePanel } from "../components/hooks";
 import Render from "../components/Render";
 
+const FrameWHInput = ({ onNewFrame, ...props }: ICFInput & { onNewFrame: () => void }) => (
+  <CFInput
+    w="56px"
+    h="36px"
+    p="8px"
+    onKeyDown={(e) => {
+      if (e.key === "Enter") {
+        onNewFrame();
+      }
+    }}
+    {...props}
+  />
+);
+
 const AddPlugin = ({ pluginInfo, ...props }: IPlugin) => {
   const id = useMemo(() => `add_${getRandomHash()}`, []);
   const lang = langStore.tgt;
   const expand = usePluginIsExpanded(id);
+  const [w, setW] = useState(512);
+  const [h, setH] = useState(512);
 
   const commonProps: ButtonProps = {
     w: `${DEFAULT_PLUGIN_SETTINGS.iconW}px`,
@@ -57,13 +75,34 @@ const AddPlugin = ({ pluginInfo, ...props }: IPlugin) => {
       true,
     );
   };
+  const onNewFrame = () => {
+    const newAlias = `add.frame.${getRandomHash()}`;
+    const newFrame = new Frame(newAlias, []);
+    newFrame.params.properties.bboxFields = getCenteredBBox(w, h, BoardStore.board).fields;
+    useSafeExecute(
+      "addJson",
+      null,
+      true,
+      {
+        success: async () => toastWord("success", Toast_Words["add-frame-success-message"]),
+        failed: async () => toastWord("error", Toast_Words["add-frame-error-message"]),
+      },
+      {
+        noSelect: true,
+        safeOpt: {
+          retry: 3,
+          retryInterval: 500,
+        },
+      },
+    )({ alias: newAlias, json: newFrame.toJson() });
+  };
 
   return (
     <Render id={id} {...props}>
       <Flex w="100%" h="100%" direction="column">
         <CFHeading>{translate(Add_Words["add-plugin-header"], lang)}</CFHeading>
         <CFDivider />
-        <Flex w="100%" flex={1} wrap="wrap" pointerEvents={expand ? "auto" : "none"}>
+        <Flex w="100%" flex={1} wrap="wrap" align="center" pointerEvents={expand ? "auto" : "none"}>
           <CFIconButton
             src={ADD_TEXT_ICON}
             tooltip={translate(Add_Words["add-text-button"], lang)}
@@ -99,6 +138,25 @@ const AddPlugin = ({ pluginInfo, ...props }: IPlugin) => {
             onClick={onNewProject}
             {...commonProps}
           />
+          <CFIconButton
+            src={ADD_FRAME_ICON}
+            tooltip={translate(Add_Words["add-frame-button"], lang)}
+            id={`${id}_frame`}
+            onClick={onNewFrame}
+            {...commonProps}
+          />
+          <FrameWHInput
+            ml="4px"
+            tooltip={lang === "zh" ? "画框宽度" : "Frame Width"}
+            onNewFrame={onNewFrame}
+            useNumberInputProps={{ defaultValue: w, onChange: (value) => setW(+value) }}
+          />
+          <FrameWHInput
+            ml="8px"
+            tooltip={lang === "zh" ? "画框高度" : "Frame Height"}
+            onNewFrame={onNewFrame}
+            useNumberInputProps={{ defaultValue: h, onChange: (value) => setH(+value) }}
+          />
         </Flex>
       </Flex>
     </Render>