diff --git a/src/components/data-form/DataForm.vue b/src/components/data-form/DataForm.vue index 96d01b3..88f05d5 100644 --- 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; } diff --git a/src/editor/propEditors/TransformEditor.vue b/src/editor/propEditors/TransformEditor.vue new file mode 100644 index 0000000..9559bb7 --- /dev/null +++ b/src/editor/propEditors/TransformEditor.vue @@ -0,0 +1,216 @@ + + + + + diff --git a/src/editor/widgets/property/PropertyPanel.vue b/src/editor/widgets/property/PropertyPanel.vue index 8c02748..2b9b401 100644 --- 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 { diff --git a/src/editor/widgets/property/PropertyPanelConstant.ts b/src/editor/widgets/property/PropertyPanelConstant.ts index 4f43277..f713f55 100644 --- 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(TransformEditor); + const basicFieldsSetter: Array = [ { dataPath: 'id', label: '唯一ID', input: 'Input', @@ -39,11 +44,10 @@ const basicFieldsSetter: Array = [ dataPath: 'dt.color', label: '颜色', input: 'ColorPicker', inputProps: {}, }, - // { - // dataPath: 'tf', input: 'TransformEditor', - // inputProps: { - // }, - // }, + { + dataPath: 'tf', input: 'TransformEditor', + inputProps: {}, + }, // { // dataPath: 'dt', input: 'InOutCenterEditor', // inputProps: {