From 1cae64278900abd0eccf98cc06bb9fc2f99be65f Mon Sep 17 00:00:00 2001 From: carefree0910 Date: Thu, 25 May 2023 18:01:32 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=F0=9F=9A=A7Implemented=20`BasicEditor?= =?UTF-8?q?Plugin`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cfdraw/.web/src/_settings.ts | 18 +++ .../.web/src/assets/icons/corner-radius.svg | 1 + cfdraw/.web/src/assets/icons/rotate.svg | 1 + cfdraw/.web/src/lang/nodeEditor.ts | 3 + cfdraw/.web/src/lang/plugins.ts | 2 + cfdraw/.web/src/lang/tooltip.ts | 3 + .../src/plugins/_react/BasicEditorPlugin.tsx | 121 ++++++++++++++++++ cfdraw/.web/src/plugins/index.tsx | 1 + cfdraw/.web/src/schema/plugins.ts | 2 + 9 files changed, 152 insertions(+) create mode 100644 cfdraw/.web/src/assets/icons/corner-radius.svg create mode 100644 cfdraw/.web/src/assets/icons/rotate.svg create mode 100644 cfdraw/.web/src/plugins/_react/BasicEditorPlugin.tsx diff --git a/cfdraw/.web/src/_settings.ts b/cfdraw/.web/src/_settings.ts index 424cd977..546f15ab 100644 --- a/cfdraw/.web/src/_settings.ts +++ b/cfdraw/.web/src/_settings.ts @@ -168,6 +168,24 @@ export const reactPluginSettings: IMakePlugin[] = [ 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: { diff --git a/cfdraw/.web/src/assets/icons/corner-radius.svg b/cfdraw/.web/src/assets/icons/corner-radius.svg new file mode 100644 index 00000000..87970304 --- /dev/null +++ b/cfdraw/.web/src/assets/icons/corner-radius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cfdraw/.web/src/assets/icons/rotate.svg b/cfdraw/.web/src/assets/icons/rotate.svg new file mode 100644 index 00000000..4ab0259c --- /dev/null +++ b/cfdraw/.web/src/assets/icons/rotate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cfdraw/.web/src/lang/nodeEditor.ts b/cfdraw/.web/src/lang/nodeEditor.ts index 01e08bf8..5e101368 100644 --- a/cfdraw/.web/src/lang/nodeEditor.ts +++ b/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> = { 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", }, }; diff --git a/cfdraw/.web/src/lang/plugins.ts b/cfdraw/.web/src/lang/plugins.ts index c6369c76..1f23ea83 100644 --- a/cfdraw/.web/src/lang/plugins.ts +++ b/cfdraw/.web/src/lang/plugins.ts @@ -18,6 +18,7 @@ const _pluginsLangRecords: Record> = { github: "Github", shortcuts: "快捷键", logo: "Logo", + basicEditor: "编辑基础属性", textEditor: "编辑文本", groupEditor: "编辑组", multiEditor: "编辑多节点", @@ -44,6 +45,7 @@ const _pluginsLangRecords: Record> = { github: "Github", shortcuts: "Shortcuts", logo: "Logo", + basicEditor: "Edit Basic Fields", textEditor: "Edit Text", groupEditor: "Edit Group", multiEditor: "Edit Multi Nodes", diff --git a/cfdraw/.web/src/lang/tooltip.ts b/cfdraw/.web/src/lang/tooltip.ts index e37f00ca..a62232c5 100644 --- a/cfdraw/.web/src/lang/tooltip.ts +++ b/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> = { [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> = { [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", diff --git a/cfdraw/.web/src/plugins/_react/BasicEditorPlugin.tsx b/cfdraw/.web/src/plugins/_react/BasicEditorPlugin.tsx new file mode 100644 index 00000000..0f38b8cc --- /dev/null +++ b/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 ( + + +
{caption}
+ + { + if (e.key === "Enter") { + (e.target as any)?.blur(); + } + }} + useNumberInputProps={{ + value: iv, + onChange: (value) => setIv(+value), + onBlur: () => setValue(iv), + }} + {...props} + /> + + ); +}; + +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 = ( + + + + + + } + value={rotation} + setValue={setRotation({ trace: true })} + /> + {displayNode.type === "image" ? ( + } + 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} + + ); + } + } + } + + return ( + + {translate(NodeEditor_Words["basic-editor-plugin-header"], lang)} + + {Fields} + + ); +}; +drawboardPluginFactory.register("basicEditor", true)(observer(BasicEditorPlugin)); diff --git a/cfdraw/.web/src/plugins/index.tsx b/cfdraw/.web/src/plugins/index.tsx index 59c86bd2..04a075b6 100644 --- a/cfdraw/.web/src/plugins/index.tsx +++ b/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"; diff --git a/cfdraw/.web/src/schema/plugins.ts b/cfdraw/.web/src/schema/plugins.ts index 18d511f3..5f5156d8 100644 --- a/cfdraw/.web/src/schema/plugins.ts +++ b/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;