fix(editor): 在组件树将组件拖入不同布局的容器内,需要改变其布局

fix #552
This commit is contained in:
roymondchen 2023-11-13 20:01:32 +08:00
parent 7f6ba9de99
commit ce0c941bf1
2 changed files with 31 additions and 17 deletions

View File

@ -36,6 +36,7 @@ import {
getInitPositionStyle,
getNodeIndex,
isFixed,
setChilrenLayout,
setLayout,
} from '@editor/utils/editor';
import { beforePaste, getAddParent } from '@editor/utils/operator';
@ -510,8 +511,8 @@ class Editor extends BaseService {
const newLayout = await this.getLayout(newConfig);
const layout = await this.getLayout(node);
if (newLayout !== layout) {
newConfig = setLayout(newConfig, newLayout);
if (Array.isArray(newConfig.items) && newLayout !== layout) {
newConfig = setChilrenLayout(newConfig as MContainer, newLayout);
}
parentNodeItems[index] = newConfig;
@ -788,7 +789,15 @@ class Editor extends BaseService {
}
}
const layout = await this.getLayout(parent);
const newLayout = await this.getLayout(targetParent);
if (newLayout !== layout) {
setLayout(config, newLayout);
}
parent.items?.splice(index, 1);
targetParent.items?.splice(targetIndex, 0, config);
const page = this.get('page');

View File

@ -129,26 +129,31 @@ export const getInitPositionStyle = (style: Record<string, any> = {}, layout: La
return style;
};
export const setLayout = (node: MNode, layout: Layout) => {
export const setChilrenLayout = (node: MContainer, layout: Layout) => {
node.items?.forEach((child: MNode) => {
if (isPop(child)) return;
const style = child.style || {};
// 是 fixed 不做处理
if (style.position === 'fixed') return;
if (layout !== Layout.RELATIVE) {
style.position = 'absolute';
} else {
child.style = getRelativeStyle(style);
child.style.right = 'auto';
child.style.bottom = 'auto';
}
setLayout(child, layout);
});
return node;
};
export const setLayout = (node: MNode, layout: Layout) => {
if (isPop(node)) return;
const style = node.style || {};
// 是 fixed 不做处理
if (style.position === 'fixed') return;
if (layout !== Layout.RELATIVE) {
style.position = 'absolute';
} else {
node.style = getRelativeStyle(style);
node.style.right = 'auto';
node.style.bottom = 'auto';
}
return node;
};
export const change2Fixed = (node: MNode, root: MApp) => {
const path = getNodePath(node.id, root.items);
const offset = {