github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-15 05:36:39 +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

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