✨🚧Implemented BasicEditorPlugin

cfdraw/.web/src/_settings.ts

@@ -168,6 +168,24 @@ export const reactPluginSettings: IMakePlugin<ReactPlugins>[] = [
       noExpand: true,
     },
   },
+  {
+    type: "basicEditor",
+    props: {
+      nodeConstraintRules: {
+        some: ["svg", "image", "path", "rectangle", "group"],
+      },
+      renderInfo: {
+        w: 280,
+        h: 210,
+        src: EditorIcon,
+        tooltip: "basic-editor-tooltip",
+        pivot: "right",
+        follow: true,
+        keepOpen: true,
+      },
+      pluginInfo: {},
+    },
+  },
   {
     type: "textEditor",
     props: {

cfdraw/.web/src/lang/nodeEditor.ts

@@ -1,14 +1,17 @@
 import { Lang } from "@carefree0910/core";
 
 export enum NodeEditor_Words {
+  "basic-editor-plugin-header" = "basic-editor-plugin-header",
   "text-editor-plugin-header" = "text-editor-plugin-header",
 }
 
 export const nodeEditorLangRecords: Record<Lang, Record<NodeEditor_Words, string>> = {
   zh: {
+    [NodeEditor_Words["basic-editor-plugin-header"]]: "基础属性",
     [NodeEditor_Words["text-editor-plugin-header"]]: "编辑文本",
   },
   en: {
+    [NodeEditor_Words["basic-editor-plugin-header"]]: "Basic Fields",
     [NodeEditor_Words["text-editor-plugin-header"]]: "Edit Text",
   },
 };

cfdraw/.web/src/lang/plugins.ts

@@ -18,6 +18,7 @@ const _pluginsLangRecords: Record<Lang, Record<AllPlugins, string>> = {
     github: "Github",
     shortcuts: "快捷键",
     logo: "Logo",
+    basicEditor: "编辑基础属性",
     textEditor: "编辑文本",
     groupEditor: "编辑组",
     multiEditor: "编辑多节点",
@@ -44,6 +45,7 @@ const _pluginsLangRecords: Record<Lang, Record<AllPlugins, string>> = {
     github: "Github",
     shortcuts: "Shortcuts",
     logo: "Logo",
+    basicEditor: "Edit Basic Fields",
     textEditor: "Edit Text",
     groupEditor: "Edit Group",
     multiEditor: "Edit Multi Nodes",

cfdraw/.web/src/lang/tooltip.ts

@@ -7,6 +7,7 @@ export enum Tooltip_Words {
   "enter-sketch-mode-tooltip" = "enter-sketch-mode-tooltip",
   "undo-tooltip" = "undo-tooltip",
   "redo-tooltip" = "redo-tooltip",
+  "basic-editor-tooltip" = "basic-editor-tooltip",
   "text-editor-tooltip" = "text-editor-tooltip",
   "ungroup-the-nodes-tooltip" = "ungroup-the-nodes-tooltip",
   "group-the-nodes-tooltip" = "group-the-nodes-tooltip",
@@ -25,6 +26,7 @@ export const tooltipLangRecords: Record<Lang, Record<Tooltip_Words, string>> = {
     [Tooltip_Words["enter-sketch-mode-tooltip"]]: "进入涂鸦模式",
     [Tooltip_Words["undo-tooltip"]]: "撤销",
     [Tooltip_Words["redo-tooltip"]]: "重做",
+    [Tooltip_Words["basic-editor-tooltip"]]: "基础属性编辑器",
     [Tooltip_Words["text-editor-tooltip"]]: "文本编辑器",
     [Tooltip_Words["ungroup-the-nodes-tooltip"]]: "解组",
     [Tooltip_Words["group-the-nodes-tooltip"]]: "打组",
@@ -41,6 +43,7 @@ export const tooltipLangRecords: Record<Lang, Record<Tooltip_Words, string>> = {
     [Tooltip_Words["enter-sketch-mode-tooltip"]]: "Enter Sketch Mode",
     [Tooltip_Words["undo-tooltip"]]: "Undo",
     [Tooltip_Words["redo-tooltip"]]: "Redo",
+    [Tooltip_Words["basic-editor-tooltip"]]: "Basic Fields Editor",
     [Tooltip_Words["text-editor-tooltip"]]: "Text Editor",
     [Tooltip_Words["ungroup-the-nodes-tooltip"]]: "Ungroup the Nodes",
     [Tooltip_Words["group-the-nodes-tooltip"]]: "Group the Nodes",

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

@@ -0,0 +1,121 @@
+import { useUnmount } from "ahooks";
+import { ReactElement, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Center, Flex } from "@chakra-ui/react";
+
+import {
+  langStore,
+  translate,
+  useCornerRadius,
+  useIsReady,
+  useSelecting,
+} from "@carefree0910/business";
+
+import { ReactComponent as RotateIcon } from "@/assets/icons/rotate.svg";
+import { ReactComponent as CornerRadiusIcon } from "@/assets/icons/corner-radius.svg";
+
+import type { IPlugin } from "@/schema/plugins";
+import { NodeEditor_Words } from "@/lang/nodeEditor";
+import { usePluginIds } from "@/stores/pluginsInfo";
+import CFIcon from "@/components/CFIcon";
+import CFDivider from "@/components/CFDivider";
+import CFHeading from "@/components/CFHeading";
+import CFInput, { ICFInput } from "@/components/CFInput";
+import { CFCaption } from "@/components/CFText";
+import { drawboardPluginFactory } from "../utils/factory";
+import Render from "../components/Render";
+import { mean } from "@carefree0910/core";
+
+const FieldInput = ({
+  caption,
+  value,
+  setValue,
+  ...props
+}: ICFInput & {
+  caption?: string | ReactElement;
+  value: number;
+  setValue: (value: number) => void;
+}) => {
+  const [iv, setIv] = useState(value);
+
+  useEffect(() => setIv(value), [value]);
+  useUnmount(() => setValue(iv));
+
+  return (
+    <Flex align="center">
+      <CFCaption w="24px" mr="12px" as="div">
+        <Center>{caption}</Center>
+      </CFCaption>
+      <CFInput
+        w="72px"
+        h="36px"
+        p="12px"
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            (e.target as any)?.blur();
+          }
+        }}
+        useNumberInputProps={{
+          value: iv,
+          onChange: (value) => setIv(+value),
+          onBlur: () => setValue(iv),
+        }}
+        {...props}
+      />
+    </Flex>
+  );
+};
+
+const BasicEditorPlugin = ({ pluginInfo, ...props }: IPlugin) => {
+  const id = usePluginIds("basicEditor").id;
+  const lang = langStore.tgt;
+  let x: number, y: number, w: number, h: number, rotation: number;
+  let Fields: ReactElement | null = null;
+  const { cornerRadius, setCornerRadius } = useCornerRadius();
+  if (!useIsReady()) {
+    props.renderInfo.isInvisible = true;
+  } else {
+    const info = useSelecting("basic")({ fixed: 1 });
+    if (!info) {
+      props.renderInfo.isInvisible = true;
+    } else {
+      ({ x, y, w, h, rotation } = info);
+      const { type, displayNode, setX, setY, setW, setH, setRotation } = info;
+      if (type === "none" || type === "multiple") {
+        props.renderInfo.isInvisible = true;
+      } else {
+        Fields = (
+          <Flex w="100%" px="12px" gap="12px" wrap="wrap" justify="flex-start">
+            <FieldInput caption="X" value={x} setValue={setX({ trace: true })} />
+            <FieldInput caption="Y" value={y} setValue={setY({ trace: true })} />
+            <FieldInput caption="W" value={w} setValue={setW({ trace: true })} />
+            <FieldInput caption="H" value={h} setValue={setH({ trace: true })} />
+            <FieldInput
+              caption={<CFIcon svg={RotateIcon} fillbyCurrentColor />}
+              value={rotation}
+              setValue={setRotation({ trace: true })}
+            />
+            {displayNode.type === "image" ? (
+              <FieldInput
+                caption={<CFIcon svg={CornerRadiusIcon} fillbyCurrentColor />}
+                value={
+                  cornerRadius ? parseFloat(mean(Object.values(cornerRadius)).toFixed(1)) : 0.0
+                }
+                setValue={(v) => setCornerRadius({ trace: true })({ lt: v, rt: v, rb: v, lb: v })}
+              />
+            ) : null}
+          </Flex>
+        );
+      }
+    }
+  }
+
+  return (
+    <Render id={id} {...props}>
+      <CFHeading>{translate(NodeEditor_Words["basic-editor-plugin-header"], lang)}</CFHeading>
+      <CFDivider />
+      {Fields}
+    </Render>
+  );
+};
+drawboardPluginFactory.register("basicEditor", true)(observer(BasicEditorPlugin));

cfdraw/.web/src/plugins/index.tsx

@@ -17,6 +17,7 @@ export * from "./_react/ArrangePlugin";
 export * from "./_react/UndoRedoPlugin";
 export * from "./_react/DownloadPlugin";
 export * from "./_react/DeletePlugin";
+export * from "./_react/BasicEditorPlugin";
 export * from "./_react/TextEditorPlugin";
 export * from "./_react/GroupPlugin";
 export * from "./_react/LinksPlugin";

cfdraw/.web/src/schema/plugins.ts

@@ -101,6 +101,7 @@ export const allReactPlugins = [
   "github",
   "shortcuts",
   "logo",
+  "basicEditor",
   "textEditor",
   "groupEditor",
   "multiEditor",
@@ -134,6 +135,7 @@ export interface IPluginProps {
   github: IPlugin;
   shortcuts: IPlugin;
   logo: ILogoPlugin;
+  basicEditor: IPlugin;
   textEditor: IPlugin;
   groupEditor: IPlugin;
   multiEditor: IPlugin;