fix(editor): 已选组件树形拖放时, layout 根据父窗口动态变化 (#210)

* fix(editor): 已选组件树形拖放时, layout 根据父窗口动态变化

当拖拽到不同的父节点时, 自身节点的position不会根据父容器变化

* 修改代码格式

Co-authored-by: jia000 <398009049@qq.com>

Co-authored-by: jia000 <398009049@qq.com>
This commit is contained in:
i33 2022-07-28 13:47:54 +08:00 committed by GitHub
parent fff587d9eb
commit 340eeb32d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -61,12 +61,14 @@ import type { ElTree } from 'element-plus';
import { throttle } from 'lodash-es';
import type { MNode, MPage } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema';
import { MContainer, NodeType } from '@tmagic/schema';
import StageCore from '@tmagic/stage';
import type { EditorService } from '@editor/services/editor';
import type { Services } from '@editor/type';
import { Layout } from '@editor/type';
import LayerMenu from './LayerMenu.vue';
import LayerMenu from './LayerMenu.vue';
const throttleTime = 150;
@ -104,8 +106,16 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
return false;
},
handleDragEnd() {
async handleDragEnd(e: any) {
if (!tree.value) return;
const { data: node } = e;
const parent = editorService?.getParentById(node.id, false) as MContainer;
const layout = await editorService?.getLayout(parent);
node.style.position = layout;
if (layout === Layout.RELATIVE) {
node.style.top = 0;
node.style.left = 0;
}
const { data } = tree.value;
const [page] = data as [MPage];
editorService?.update(page);