From f20373d39b305c7c9b311bb8d9c59d3b5acb6119 Mon Sep 17 00:00:00 2001 From: Zhang Qianze Date: Sun, 25 Aug 2024 12:07:33 +0800 Subject: [PATCH 1/2] feat: enhance properties --- src/common/utils.ts | 77 ++++++++++++++++- src/components/editor/flow/index.tsx | 1 + .../nodes/propertySection/index.module.scss | 6 +- .../flow/nodes/propertySection/index.tsx | 86 +++++++++++++++---- .../flow/nodes/propertySection/item/index.tsx | 51 +++++++++-- 5 files changed, 196 insertions(+), 25 deletions(-) diff --git a/src/common/utils.ts b/src/common/utils.ts index 34f2290..f62eabc 100644 --- a/src/common/utils.ts +++ b/src/common/utils.ts @@ -64,7 +64,25 @@ export const isNumberType = (type: PropertyType): boolean => { type === "float32" || type === "float64" } -export const getZeroValue = (type: InputType) => { +export const getInputTypeByPropertyType = (type: PropertyType): InputType => { + if (type === "string") { + return "string" + } else if (isNumberType(type)) { + return "number" + } else if (type === "bool") { + return "boolean" + } + + return "string" +} + +export const getDefaultValueByPropertyType = (type: PropertyType) => { + let inputType = getInputTypeByPropertyType(type) + return getDefaultValueByInputType(inputType) +} + + +export const getDefaultValueByInputType = (type: InputType) => { if (type === "number") { return 0 } else if (type === "boolean") { @@ -432,6 +450,63 @@ export const edgesToConnections = ( } } + // merge dests + connections = connections.map((connection) => { + const { cmd, data, audio_frame, video_frame } = connection + const finalConnection: IConnection = { + ...connection, + } + if (cmd?.length) { + finalConnection.cmd = cmd.reduce((acc, curr) => { + const { name, dest } = curr + const temp = acc.find((i) => i.name == name) + if (temp) { + temp.dest.push(...dest) + } else { + acc.push(curr) + } + return acc + }, [] as IConnectionData[]) + } + if (data?.length) { + finalConnection.data = data.reduce((acc, curr) => { + const { name, dest } = curr + const temp = acc.find((i) => i.name == name) + if (temp) { + temp.dest.push(...dest) + } else { + acc.push(curr) + } + return acc + }, [] as IConnectionData[]) + } + if (audio_frame?.length) { + finalConnection.audio_frame = audio_frame.reduce((acc, curr) => { + const { name, dest } = curr + const temp = acc.find((i) => i.name == name) + if (temp) { + temp.dest.push(...dest) + } else { + acc.push(curr) + } + return acc + }, [] as IConnectionData[]) + } + if (video_frame?.length) { + finalConnection.video_frame = video_frame.reduce((acc, curr) => { + const { name, dest } = curr + const temp = acc.find((i) => i.name == name) + if (temp) { + temp.dest.push(...dest) + } else { + acc.push(curr) + } + return acc + }, [] as IConnectionData[]) + } + return finalConnection + }) + return connections } diff --git a/src/components/editor/flow/index.tsx b/src/components/editor/flow/index.tsx index d252587..ede5eea 100644 --- a/src/components/editor/flow/index.tsx +++ b/src/components/editor/flow/index.tsx @@ -164,6 +164,7 @@ const Flow = () => { logger.debug("saveFlow nodes:", nodes) logger.debug("saveFlow edges:", edges) const extensions = nodesToExtensions(nodes, installedExtensions) + // const extensionGroups = const connections = edgesToConnections(edges, nodes) logger.debug("saveFlow extensions:", extensions) logger.debug("saveFlow connections:", connections) diff --git a/src/components/editor/flow/nodes/propertySection/index.module.scss b/src/components/editor/flow/nodes/propertySection/index.module.scss index d6d8d15..036b7bb 100644 --- a/src/components/editor/flow/nodes/propertySection/index.module.scss +++ b/src/components/editor/flow/nodes/propertySection/index.module.scss @@ -12,9 +12,13 @@ } +.menuItem { + margin: 5px !important; +} + .contentSection { - width: 220px; max-height: 300px; + padding: 10px 20px; overflow-y: auto; overflow-x: hidden; diff --git a/src/components/editor/flow/nodes/propertySection/index.tsx b/src/components/editor/flow/nodes/propertySection/index.tsx index 68e31f7..d336ecc 100644 --- a/src/components/editor/flow/nodes/propertySection/index.tsx +++ b/src/components/editor/flow/nodes/propertySection/index.tsx @@ -1,9 +1,10 @@ -import { Popover, Input } from 'antd'; +import { Popover, Input, Form, Checkbox, Button, Card, Select, Dropdown, Typography, Space, MenuProps } from 'antd'; import { IExtensionProperty, IExtensionPropertyTypes } from "@/types" import PropertyItem from "./item" -import { EditOutlined } from "@ant-design/icons" +import { DownOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons" import styles from "./index.module.scss" -import { useMemo } from 'react'; +import { useMemo, useState } from 'react'; +import { getDefaultValueByPropertyType } from '@/common'; interface PropertySectionProps { @@ -19,22 +20,77 @@ const PropertySection = (props: PropertySectionProps) => { return propertyTypes ? Object.keys(propertyTypes).sort((a: string, b: string) => a > b ? 1 : -1) : [] }, [propertyTypes]) + const propertiesMenu = useMemo(() => { + return propertyKeyList.map((key, index) => { + return { + key: key, + label: key, + className: styles.menuItem, + } + }) + }, [propertyKeyList]) + + const availableProperties = useMemo(() => { + return propertyTypes ? propertyKeyList.filter(key => property?.[key] !== undefined) : [] + }, [property, propertyKeyList]) + const content = ( -
- {propertyKeyList.map((key, index) => { - return onUpdate?.(key, value)}> - })} -
+ { + if (propertyTypes && propertyTypes?.[key]) { + onUpdate?.(key, getDefaultValueByPropertyType(propertyTypes[key].type)) + } + }, + onDeselect: ({key}) => { + onUpdate?.(key, undefined) + } + }} + > + + + Edit Properties + + + + + )} + bordered={false} + styles={{body: {padding: 0}}} + > +
{}} + onFinishFailed={() =>{}} + autoComplete="off" + > + {availableProperties.map((key, index) => { + return onUpdate?.(key, value)}> + })} +
+ ); - return property ?
+ return propertyKeyList.length > 0 ?
property - +
: <> diff --git a/src/components/editor/flow/nodes/propertySection/item/index.tsx b/src/components/editor/flow/nodes/propertySection/item/index.tsx index 85b070f..c71a253 100644 --- a/src/components/editor/flow/nodes/propertySection/item/index.tsx +++ b/src/components/editor/flow/nodes/propertySection/item/index.tsx @@ -1,6 +1,6 @@ import { useMemo, useState } from "react" -import { Input, Switch, InputNumber, message } from "antd" -import { getZeroValue, hasDecimalPoint, isNumberType } from "@/common" +import { Input, Switch, InputNumber, message, Form } from "antd" +import { getDefaultValueByInputType, hasDecimalPoint, isNumberType } from "@/common" import { PropertyType, InputType } from "@/types" import styles from "./index.module.scss" @@ -46,7 +46,7 @@ const checkValue = (value: any, propertyType: PropertyType, inputType: InputType const CustomInput = (CustomInputProps: CustomInputProps) => { - const { propertyType, value: propsValue, onUpdate } = CustomInputProps + const { propertyType, value: propsValue, onUpdate, name } = CustomInputProps const [value, setValue] = useState(propsValue) const [status, setStatus] = useState("") @@ -71,7 +71,7 @@ const CustomInput = (CustomInputProps: CustomInputProps) => { } if (checkValue(value, propertyType, inputType)) { if (value === null || value === undefined) { - value = getZeroValue(inputType) + value = getDefaultValueByInputType(inputType) } setValue(value) setStatus("") @@ -95,28 +95,63 @@ const CustomInput = (CustomInputProps: CustomInputProps) => { if (inputType === "string") { return + // return + // + // } else if (inputType === "number") { return + // return ( + // + // + // + // ) } else if (inputType === "boolean") { return + // return ( + // + // + // + // + // ) } } From 9adbc5746ecab072412d496d2d53c3b2013e4346 Mon Sep 17 00:00:00 2001 From: Zhang Qianze Date: Sun, 25 Aug 2024 12:09:25 +0800 Subject: [PATCH 2/2] fix: remove comments --- .../flow/nodes/propertySection/item/index.tsx | 39 ------------------- 1 file changed, 39 deletions(-) diff --git a/src/components/editor/flow/nodes/propertySection/item/index.tsx b/src/components/editor/flow/nodes/propertySection/item/index.tsx index c71a253..f126209 100644 --- a/src/components/editor/flow/nodes/propertySection/item/index.tsx +++ b/src/components/editor/flow/nodes/propertySection/item/index.tsx @@ -101,19 +101,6 @@ const CustomInput = (CustomInputProps: CustomInputProps) => { onChange={onChange} onBlur={onBlur} > - // return - // - // } else if (inputType === "number") { return { onChange={onChange} onBlur={onBlur} > - // return ( - // - // - // - // ) } else if (inputType === "boolean") { return - // return ( - // - // - // - // - // ) } }