feat: 支持 panel 参数 keepVisibleWhileDragging, 用于指定该 panel 在内部节点拖拽时不隐藏

This commit is contained in:
lihao.ylh 2021-10-13 10:19:53 +08:00
parent 799fa5e7d0
commit 5c9ba3438e
6 changed files with 35 additions and 24 deletions

View File

@ -143,26 +143,26 @@ export class Designer {
parent?.componentMeta?.componentName || parent?.componentMeta?.componentName ||
''; '';
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
this.postEvent('drag', { // this.postEvent('drag', {
time: (endTime - startTime).toFixed(2), // time: (endTime - startTime).toFixed(2),
selected: nodes // selected: nodes
?.map((n) => { // ?.map((n) => {
if (!n) { // if (!n) {
return; // return;
} // }
// eslint-disable-next-line no-shadow // // eslint-disable-next-line no-shadow
const npm = n?.componentMeta?.npm; // const npm = n?.componentMeta?.npm;
return ( // return (
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') || // [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
n?.componentMeta?.componentName // n?.componentMeta?.componentName
); // );
}) // })
.join('&'), // .join('&'),
align: loc?.detail?.near?.align || '', // align: loc?.detail?.near?.align || '',
pos: loc?.detail?.near?.pos || '', // pos: loc?.detail?.near?.pos || '',
src, // src,
dest, // dest,
}); // });
} }
} }
} }

View File

@ -543,7 +543,7 @@ export class Dragon {
/* istanbul ignore next */ /* istanbul ignore next */
const chooseSensor = (e: LocateEvent) => { const chooseSensor = (e: LocateEvent) => {
// this.sensors will change on dragstart // this.sensors will change on dragstart
const sensors: ISensor[] = (masterSensors as ISensor[]).concat(this.sensors); const sensors: ISensor[] = this.sensors.concat(masterSensors as ISensor[]);
let sensor = let sensor =
e.sensor && e.sensor.isEnter(e) e.sensor && e.sensor.isEnter(e)
? e.sensor ? e.sensor

View File

@ -197,6 +197,7 @@ export class TitledPanelView extends Component<{ panel: Panel; area?: string }>
hidden: !panel.visible, hidden: !panel.visible,
})} })}
id={panelName} id={panelName}
data-keep-visible-while-dragging={panel.config.props?.keepVisibleWhileDragging}
> >
<PanelOperationRow panel={panel} /> <PanelOperationRow panel={panel} />
<PanelTitle panel={panel} /> <PanelTitle panel={panel} />
@ -258,6 +259,7 @@ export class PanelView extends Component<{
hidden: !panel.visible, hidden: !panel.visible,
})} })}
id={panelName} id={panelName}
data-keep-visible-while-dragging={panel.config.props?.keepVisibleWhileDragging}
> >
{!hideOperationRow && <PanelOperationRow panel={panel} />} {!hideOperationRow && <PanelOperationRow panel={panel} />}
{panel.body} {panel.body}

View File

@ -14,11 +14,18 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
componentDidMount() { componentDidMount() {
const { area } = this.props; const { area } = this.props;
const triggerClose = () => area.setVisible(false); const triggerClose = (e: any) => {
area.skeleton.editor.on('designer.dragstart', triggerClose); if (!area.visible) return;
// 假如当前操作 target 祖先节点中有属性 data-keep-visible-while-dragging="true" 代表该 target 所属 panel
// 不希望 target 在 panel 范围内拖拽时关闭 panel
const panelElem = e.originalEvent?.target.closest('div[data-keep-visible-while-dragging="true"]');
if (panelElem) return;
area.setVisible(false);
};
area.skeleton.editor.on('designer.drag', triggerClose);
this.dispose = () => { this.dispose = () => {
area.skeleton.editor.removeListener('designer.dragstart', triggerClose); area.skeleton.editor.removeListener('designer.drag', triggerClose);
}; };
this.focusing = focusTracker.create({ this.focusing = focusTracker.create({

View File

@ -104,6 +104,7 @@ export interface PanelProps {
onDestroy?: () => any; onDestroy?: () => any;
shortcut?: string; // 只有在特定位置,可触发 toggle show shortcut?: string; // 只有在特定位置,可触发 toggle show
enableDrag?: boolean; // 是否开启通过 drag 调整 宽度 enableDrag?: boolean; // 是否开启通过 drag 调整 宽度
keepVisibleWhileDragging?: boolean; // 是否在该 panel 范围内拖拽时保持 visible 状态
} }
export interface PanelDockConfig extends IDockBaseConfig { export interface PanelDockConfig extends IDockBaseConfig {

View File

@ -159,6 +159,7 @@ plugins.register((ctx: ILowCodePluginContext) => {
content: Outline, content: Outline,
panelProps: { panelProps: {
area: 'leftFloatArea', area: 'leftFloatArea',
keepVisibleWhileDragging: true,
}, },
}); });
skeleton.add({ skeleton.add({