feat(editor): 添加 TransformEditor 组件并优化 DataForm 样式

- 新增 TransformEditor 组件，用于编辑物体的变换属性（位置、旋转、缩放） - 在 PropertyPanel 中集成 TransformEditor，实现对 tf 属性的编辑 - 优化 DataForm 项的样式，增加无标签项的样式处理 - 调整 PropertyPanel 的样式，优化属性编辑界面布局
6 months ago · c87c1eac07
4 changed files with 238 additions and 8 deletions
--- a/src/components/data-form/DataForm.vue
+++ b/src/components/data-form/DataForm.vue
@ -410,8 +410,10 @@ export type {
                        'data-form-item',
                        `data-form-item-flex-${Math.min(dataFormItem.widthCount, state.columnCount)}`,
                        {
+                            'data-form-item-no-label': !dataFormItem.formItemProps.label,
                            'multiple-width-count': Math.min(dataFormItem.widthCount, state.columnCount) > 1,
                            'data-form-item-has-ext-input': dataFormItem.extInputs && dataFormItem.extInputs.length > 0,
+
                        },
                    ]"
                >
@ -483,6 +485,11 @@ export type {
    flex-shrink: 0;
 }

+.data-form-item-no-label :deep(> .el-form-item__content),
+.data-form-item-ext-input :deep(> .el-form-item__content){
+    margin-left: 0 !important;
+}
+
 .data-form-item.data-form-item-flex-1 {
    flex: 1 1 0;
 }
--- a/src/editor/propEditors/TransformEditor.vue
+++ b/src/editor/propEditors/TransformEditor.vue
@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElInputNumber, useFormItem } from "element-plus";
+import { Typeof } from "@ease-forge/shared";
+import { renderIcon } from "@/utils/webutils.js";
+
+defineOptions({
+    name: 'TransformEditor',
+});
+
+// 组件事件定义
+const emit = defineEmits<{
+    /** 更新内联表格数据 */
+    "update:modelValue": [value: ItemJson["tf"]];
+}>();
+
+// // 定义组件插槽
+// const slots = defineSlots<{
+//     /** 提交区域插槽 */
+//     slots01?: (props?: any) => Array<VueNode>;
+// }>();
+
+// // 组件属性
+// const attrs = useAttrs();
+// // 组件插槽
+// const slots = useSlots();
+// 当前组件对象
+// const instance = getCurrentInstance();
+
+// // 双向绑定的 value 属性
+// const value = defineModel<string>();
+
+// 定义 Props 类型
+interface TransformEditorProps {
+    modelValue: ItemJson["tf"];
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<TransformEditorProps>(), {});
+
+// 定义 State 类型
+interface TransformEditorState {
+}
+
+// state 属性
+const state = reactive<TransformEditorState>({});
+
+// 定义 Data 类型
+interface TransformEditorData {
+}
+
+// 内部数据
+const data: TransformEditorData = {};
+const { formItem } = useFormItem();
+
+
+function updateValue(value: number | undefined, prs: 0 | 1 | 2, xyz: 0 | 1 | 2) {
+    const rawValue: any = props.modelValue;
+    if (!rawValue[prs]) rawValue[prs] = [];
+    if (prs === 1) value = calcRotation(value);
+    rawValue[prs][xyz] = value;
+    emit("update:modelValue", rawValue);
+    console.log("updateValue", rawValue);
+    // formItem?.validate('change', (valid) => console.log(valid));
+}
+
+function getPosition(idx: 0 | 1 | 2) {
+    return props.modelValue?.[0]?.[idx];
+}
+
+function getRotation(idx: 0 | 1 | 2) {
+    const radian = props.modelValue?.[1]?.[idx];
+    if (Typeof.noValue(radian)) return;
+    return Math.round(radian * 180 / Math.PI);
+}
+
+function getScale(idx: 0 | 1 | 2) {
+    return props.modelValue?.[2]?.[idx];
+}
+
+function calcRotation(rotation?: number) {
+    if (Typeof.noValue(rotation)) return;
+    return rotation * Math.PI / 180;
+}
+
+interface TransformEditorExpose {
+    state: TransformEditorState;
+    data: TransformEditorData;
+}
+
+const expose: TransformEditorExpose = {
+    state,
+    data,
+};
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    TransformEditorProps,
+    TransformEditorState,
+}
+</script>
+
+<template>
+    <div class="transform-editor gui-toolbar">
+        <div class="gui-row">
+            <div class="gui-item-name"></div>
+            <div class="gui-item">X</div>
+            <div class="gui-item">Y</div>
+            <div class="gui-item">Z</div>
+        </div>
+        <div class="gui-row">
+            <div class="gui-item-name">
+                <component :is="renderIcon('element Rank')"></component>
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getPosition(0)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 0, 0)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getPosition(1)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 0, 1)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getPosition(2)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 0, 2)"
+                />
+            </div>
+        </div>
+        <div class="gui-row">
+            <div class="gui-item-name">
+                <component :is="renderIcon('element RefreshLeft')"></component>
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getRotation(0)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 1, 0)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getRotation(1)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 1, 1)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getRotation(2)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 1, 2)"
+                />
+            </div>
+        </div>
+        <div class="gui-row">
+            <div class="gui-item-name">
+                <component :is="renderIcon('element ScaleToOriginal')"></component>
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getScale(0)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 2, 0)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getScale(1)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 2, 1)"
+                />
+            </div>
+            <div class="gui-item">
+                <ElInputNumber
+                    :modelValue="getScale(2)"
+                    size="small"
+                    :precision="3"
+                    :controls="false"
+                    @change="(currentValue: number) => updateValue(currentValue, 2, 2)"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+div.transform-editor.gui-toolbar {
+    border: none;
+    margin: 0;
+}
+</style>
--- a/src/editor/widgets/property/PropertyPanel.vue
+++ b/src/editor/widgets/property/PropertyPanel.vue
@ -75,10 +75,13 @@ function getCollapseItemId(group: PropertySetterGroup, idx: number) {
 function onDataChange(newData: any) {
    const viewport = props.viewport;
    if (!viewport) return;
+    const data = _.find(viewport.stateManager.vdata.items, item => item.id === props.data.id);
    viewport.stateManager.beginStateUpdate();
-    lodash.merge(props.data, newData);
-    console.log("onDataChange", props.data === newData);
+    lodash.merge(data, newData);
+    console.log("onDataChange@1", JSON.stringify(data.tf));
    viewport.stateManager.endStateUpdate();
+    // data = _.find(viewport.stateManager.vdata.items, item => item.id === props.data.id);
+    // console.log("onDataChange#2", JSON.stringify(data.tf));
 }

 interface PropertyPanelExpose {
@ -130,6 +133,6 @@ export type {

 <style scoped>
 .property-panel {
-    padding: 8px 12px 16px 0;
+    padding: 8px 12px 16px 4px;
 }
 </style>
--- a/src/editor/widgets/property/PropertyPanelConstant.ts
+++ b/src/editor/widgets/property/PropertyPanelConstant.ts
@ -1,5 +1,8 @@
+import { markRaw } from "vue";
 import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts";
 import type { PropertyFieldSetter } from "@/core/base/PropertyTypes.ts";
+import { dataFormInputComponents } from "@/components/data-form/DataFormConstant.ts";
+import TransformEditor from "@/editor/propEditors/TransformEditor.vue";

 const defDataFormProps: DataFormProps = {
    columnCount: 1,
@ -8,6 +11,8 @@ const defDataFormProps: DataFormProps = {
    size: "small",
 };

+dataFormInputComponents.TransformEditor = markRaw<any>(TransformEditor);
+
 const basicFieldsSetter: Array<PropertyFieldSetter> = [
    {
        dataPath: 'id', label: '唯一ID', input: 'Input',
@ -39,11 +44,10 @@ const basicFieldsSetter: Array<PropertyFieldSetter> = [
        dataPath: 'dt.color', label: '颜色', input: 'ColorPicker',
        inputProps: {},
    },
-    // {
-    //     dataPath: 'tf', input: 'TransformEditor',
-    //     inputProps: {
-    //     },
-    // },
+    {
+        dataPath: 'tf', input: 'TransformEditor',
+        inputProps: {},
+    },
    // {
    //     dataPath: 'dt', input: 'InOutCenterEditor',
    //     inputProps: {