github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-12 11:20:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: the tips when dragging a component from the component panel same with the moving component

Browse Source
This commit is contained in:
liujuping 2022-09-06 17:57:07 +08:00 committed by LeoYuan 袁力皓
parent 02f8f981ef
commit dbe0764ff4
1 changed files with 23 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/designer/src/designer/drag-ghost/index.tsx
View File

@ -1,9 +1,10 @@
import { Component } from 'react';
import { Component, ReactElement } from 'react';
import { observer, obx, Title, makeObservable } from '@alilc/lowcode-editor-core';
import { Designer } from '../designer';
import { DragObject, isDragNodeObject, isDragNodeDataObject } from '../dragon';
import { DragObject, isDragNodeObject } from '../dragon';
import { isSimulatorHost } from '../../simulator';
import './ghost.less';
import { I18nData, NodeSchema } from '@alilc/lowcode-types';
type offBinding = () => any;
@ -11,7 +12,7 @@ type offBinding = () => any;
export default class DragGhost extends Component<{ designer: Designer }> {
private dispose: offBinding[] = [];
@obx.ref private dragObject: DragObject | null = null;
@obx.ref private titles: (string | I18nData | ReactElement)[] | null = null;
@obx.ref private x = 0;
@ -29,7 +30,7 @@ export default class DragGhost extends Component<{ designer: Designer }> {
if (e.originalEvent.type.slice(0, 4) === 'drag') {
return;
}
this.dragObject = e.dragObject;
this.titles = this.getTitles(e.dragObject);
this.x = e.globalX;
this.y = e.globalY;
}),
@ -46,13 +47,23 @@ export default class DragGhost extends Component<{ designer: Designer }> {
this.isAbsoluteLayoutContainer = false;
}),
this.dragon.onDragend(() => {
this.dragObject = null;
this.titles = null;
this.x = 0;
this.y = 0;
}),
];
}
getTitles(dragObject: DragObject) {
if (isDragNodeObject(dragObject)) {
return dragObject.nodes.map((node) => node.title);
}
const dataList = Array.isArray(dragObject.data) ? dragObject.data : [dragObject.data];
return dataList.map((item: NodeSchema, i) => (this.props.designer.getComponentMeta(item.componentName).title));
}
componentWillUnmount() {
if (this.dispose) {
this.dispose.forEach(off => off());
@ -60,35 +71,18 @@ export default class DragGhost extends Component<{ designer: Designer }> {
}
renderGhostGroup() {
const { dragObject } = this;
if (isDragNodeObject(dragObject)) {
return dragObject.nodes.map(node => {
const ghost = (
<div className="lc-ghost" key={node.id}>
<Title title={node.title} />
</div>
);
return ghost;
});
} else if (isDragNodeDataObject(dragObject)) {
return Array.isArray(dragObject.data) ? (
dragObject.data.map((item, index) => {
return (
<div className="lc-ghost" key={`ghost-${index}`}>
<div className="lc-ghost-title">{item.componentName}</div>
</div>
);
})
) : (
<div className="lc-ghost">
<div className="lc-ghost-title">{dragObject.data.componentName}</div>
return this.titles?.map((title, i) => {
const ghost = (
<div className="lc-ghost" key={i}>
<Title title={title} />
</div>
);
}
return ghost;
});
}
render() {
if (!this.dragObject) {
if (!this.titles || !this.titles.length) {
return null;
}