fix drag copy

This commit is contained in:
kangwei 2020-02-22 16:01:46 +08:00
parent a56faac6ae
commit 9d2967f612
6 changed files with 37 additions and 32 deletions

View File

@ -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;
}

View File

@ -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 Array.isArray(dragObject.data) ? dragObject.data.map((item, index) => {
return ( return (
<div className="my-ghost"> <div className="lc-ghost" key={`ghost-${index}`}>
<div className="my-ghost-title">{dragment.tagName}</div> <div className="lc-ghost-title">{item.componentName}</div>
</div> </div>
); )
}) : (
<div className="lc-ghost">
<div className="lc-ghost-title">{dragObject.data.componentName}</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()}

View File

@ -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);
} }

View File

@ -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;

View File

@ -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;

View File

@ -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';