mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-16 06:42:53 +00:00
fix drag copy
This commit is contained in:
parent
a56faac6ae
commit
9d2967f612
@ -1,4 +1,4 @@
|
|||||||
.my-ghost-group {
|
.lc-ghost-group {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
@ -9,8 +9,10 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
.my-ghost {
|
box-shadow: 0 0 6px grey;
|
||||||
.my-ghost-title {
|
transform: translate(-10%, -50%);
|
||||||
|
.lc-ghost {
|
||||||
|
.lc-ghost-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: var(--font-size-text);
|
font-size: var(--font-size-text);
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -20,10 +22,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dragging {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 99999;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: 0 0 6px grey;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -3,21 +3,25 @@ import { obx } from '@recore/obx';
|
|||||||
import { observer } from '@recore/core-obx';
|
import { observer } from '@recore/core-obx';
|
||||||
import Designer from '../../designer/designer';
|
import Designer from '../../designer/designer';
|
||||||
import './ghost.less';
|
import './ghost.less';
|
||||||
|
import { NodeSchema } from '../../designer/schema';
|
||||||
|
import Node from '../../designer/document/node/node';
|
||||||
|
import { isDragNodeObject, DragObject, isDragNodeDataObject } from '../../designer/helper/dragon';
|
||||||
|
|
||||||
type offBinding = () => any;
|
type offBinding = () => any;
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
export default class Ghost extends Component<{ designer: Designer }> {
|
export default class Ghost extends Component<{ designer: Designer }> {
|
||||||
private dispose: offBinding[] = [];
|
private dispose: offBinding[] = [];
|
||||||
@obx.ref private dragment: any = null;
|
@obx.ref private dragObject: DragObject | null = null;
|
||||||
@obx.ref private x = 0;
|
@obx.ref private x = 0;
|
||||||
@obx.ref private y = 0;
|
@obx.ref private y = 0;
|
||||||
private dragon = this.props.designer.dragon;
|
private dragon = this.props.designer.dragon;
|
||||||
|
|
||||||
componentWillMount() {
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
this.dispose = [
|
this.dispose = [
|
||||||
this.dragon.onDragstart((e) => {
|
this.dragon.onDragstart((e) => {
|
||||||
this.dragment = e.dragObject;
|
this.dragObject = e.dragObject;
|
||||||
this.x = e.globalX;
|
this.x = e.globalX;
|
||||||
this.y = e.globalY;
|
this.y = e.globalY;
|
||||||
}),
|
}),
|
||||||
@ -26,7 +30,7 @@ export default class Ghost extends Component<{ designer: Designer }> {
|
|||||||
this.y = e.globalY;
|
this.y = e.globalY;
|
||||||
}),
|
}),
|
||||||
this.dragon.onDragend(() => {
|
this.dragon.onDragend(() => {
|
||||||
this.dragment = null;
|
this.dragObject = null;
|
||||||
this.x = 0;
|
this.x = 0;
|
||||||
this.y = 0;
|
this.y = 0;
|
||||||
}),
|
}),
|
||||||
@ -44,35 +48,42 @@ export default class Ghost extends Component<{ designer: Designer }> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderGhostGroup() {
|
renderGhostGroup() {
|
||||||
const dragment = this.dragment;
|
const dragObject = this.dragObject;
|
||||||
if (Array.isArray(dragment)) {
|
if (isDragNodeObject(dragObject)) {
|
||||||
return dragment.map((node: any, index: number) => {
|
return dragObject.nodes.map((node) => {
|
||||||
const ghost = (
|
const ghost = (
|
||||||
<div className="my-ghost" key={`ghost-${index}`}>
|
<div className="lc-ghost" key={node.id}>
|
||||||
<div className="my-ghost-title">{node.tagName}</div>
|
<div className="lc-ghost-title">{node.title}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
return ghost;
|
return ghost;
|
||||||
});
|
});
|
||||||
} else {
|
} else if (isDragNodeDataObject(dragObject)) {
|
||||||
return (
|
return Array.isArray(dragObject.data) ? dragObject.data.map((item, index) => {
|
||||||
<div className="my-ghost">
|
return (
|
||||||
<div className="my-ghost-title">{dragment.tagName}</div>
|
<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>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (!this.dragment) {
|
if (!this.dragObject) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="my-ghost-group"
|
className="lc-ghost-group"
|
||||||
style={{
|
style={{
|
||||||
transform: `translate(${this.x}px, ${this.y}px)`,
|
left: this.x,
|
||||||
|
top: this.y,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{this.renderGhostGroup()}
|
{this.renderGhostGroup()}
|
||||||
|
|||||||
@ -31,7 +31,6 @@ export class SimulatorHostView extends Component<SimulatorProps & {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
console.info('mount simulator');
|
|
||||||
if (this.props.onMount) {
|
if (this.props.onMount) {
|
||||||
this.props.onMount(this.host);
|
this.props.onMount(this.host);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
@import 'variables.less';
|
@import 'variables.less';
|
||||||
|
|
||||||
.lc-designer {
|
.lc-designer {
|
||||||
|
|
||||||
--font-family: @font-family;
|
--font-family: @font-family;
|
||||||
--font-size-label: @fontSize-4;
|
--font-size-label: @fontSize-4;
|
||||||
--font-size-text: @fontSize-5;
|
--font-size-text: @fontSize-5;
|
||||||
|
|||||||
@ -466,7 +466,7 @@ export function comparePosition(node1: Node, node2: Node): number {
|
|||||||
export function insertChild(container: NodeParent, thing: Node | NodeData, at?: number | null, copy?: boolean): Node {
|
export function insertChild(container: NodeParent, thing: Node | NodeData, at?: number | null, copy?: boolean): Node {
|
||||||
let node: Node;
|
let node: Node;
|
||||||
if (copy && isNode(thing)) {
|
if (copy && isNode(thing)) {
|
||||||
thing = thing.schema;
|
thing = thing.exportSchema(false);
|
||||||
}
|
}
|
||||||
if (isNode(thing)) {
|
if (isNode(thing)) {
|
||||||
node = thing;
|
node = thing;
|
||||||
@ -490,7 +490,8 @@ export function insertChildren(
|
|||||||
const results: Node[] = [];
|
const results: Node[] = [];
|
||||||
// tslint:disable-next-line
|
// tslint:disable-next-line
|
||||||
while ((node = nodes.pop())) {
|
while ((node = nodes.pop())) {
|
||||||
results.push(insertChild(container, node, index, copy));
|
node = insertChild(container, node, index, copy);
|
||||||
|
results.push(node);
|
||||||
index = node.index;
|
index = node.index;
|
||||||
}
|
}
|
||||||
return results;
|
return results;
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { EventEmitter } from 'events';
|
|||||||
import { obx } from '@recore/obx';
|
import { obx } from '@recore/obx';
|
||||||
import Location from './location';
|
import Location from './location';
|
||||||
import DocumentModel from '../document/document-model';
|
import DocumentModel from '../document/document-model';
|
||||||
import { NodeData, NodeSchema } from '../schema';
|
import { NodeSchema } from '../schema';
|
||||||
import { ISimulator, isSimulator, ComponentInstance } from '../simulator';
|
import { ISimulator, isSimulator, ComponentInstance } from '../simulator';
|
||||||
import Node from '../document/node/node';
|
import Node from '../document/node/node';
|
||||||
import Designer from '../designer';
|
import Designer from '../designer';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user