feat: 支持绝对布局容器中不显示 dragHost

This commit is contained in:
mario.gk 2020-10-17 21:43:33 +08:00
parent 4670a38666
commit 6eb94361b1
3 changed files with 30 additions and 13 deletions

View File

@ -1,5 +1,5 @@
import { obx, autorun, computed, getPublicPath, hotkey, focusTracker } from '@ali/lowcode-editor-core'; import { obx, autorun, computed, getPublicPath, hotkey, focusTracker } from '@ali/lowcode-editor-core';
import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator'; import { ISimulatorHost, Component, NodeInstance, ComponentInstance, DropContainer } from '../simulator';
import Viewport from './viewport'; import Viewport from './viewport';
import { createSimulator } from './create-simulator'; import { createSimulator } from './create-simulator';
import { Node, ParentalNode, isNode, contains, isRootNode } from '../document'; import { Node, ParentalNode, isNode, contains, isRootNode } from '../document';
@ -1085,7 +1085,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
/** /**
* *
*/ */
getDropContainer(e: LocateEvent): DropContainer | LocationData | null { getDropContainer(e: LocateEvent): DropContainer | null {
const { target, dragObject } = e; const { target, dragObject } = e;
const isAny = isDragAnyObject(dragObject); const isAny = isDragAnyObject(dragObject);
const document = this.project.currentDocument!; const document = this.project.currentDocument!;
@ -1156,9 +1156,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
let upward: DropContainer | null = null; let upward: DropContainer | null = null;
while (container) { while (container) {
res = this.handleAccept(dropContainer, e); res = this.handleAccept(dropContainer, e);
if (isLocationData(res)) { // if (isLocationData(res)) {
return res; // return res;
} // }
if (res === true) { if (res === true) {
return dropContainer; return dropContainer;
} }
@ -1214,7 +1214,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
/** /**
* *
*/ */
handleAccept({ container, instance }: DropContainer, e: LocateEvent) { handleAccept({ container, instance }: DropContainer, e: LocateEvent): boolean {
const { dragObject } = e; const { dragObject } = e;
const document = this.currentDocument!; const document = this.currentDocument!;
if (isRootNode(container)) { if (isRootNode(container)) {
@ -1392,8 +1392,3 @@ function getMatched(elements: Array<Element | Text>, selector: string): Element
} }
return firstQueried; return firstQueried;
} }
interface DropContainer {
container: ParentalNode;
instance: ComponentInstance;
}

View File

@ -2,6 +2,7 @@ import { Component } from 'react';
import { observer, obx, Title } from '@ali/lowcode-editor-core'; import { observer, obx, Title } from '@ali/lowcode-editor-core';
import { Designer } from '../designer'; import { Designer } from '../designer';
import { DragObject, isDragNodeObject, isDragNodeDataObject } from '../dragon'; import { DragObject, isDragNodeObject, isDragNodeDataObject } from '../dragon';
import { isSimulatorHost } from '../../simulator';
import './ghost.less'; import './ghost.less';
type offBinding = () => any; type offBinding = () => any;
@ -16,6 +17,8 @@ export default class DragGhost extends Component<{ designer: Designer }> {
@obx.ref private y = 0; @obx.ref private y = 0;
@obx private isAbsoluteLayoutContainer = false;
private dragon = this.props.designer.dragon; private dragon = this.props.designer.dragon;
constructor(props: any) { constructor(props: any) {
@ -32,6 +35,14 @@ export default class DragGhost extends Component<{ designer: Designer }> {
this.dragon.onDrag(e => { this.dragon.onDrag(e => {
this.x = e.globalX; this.x = e.globalX;
this.y = e.globalY; this.y = e.globalY;
if (isSimulatorHost(e.sensor)) {
const container = e.sensor.getDropContainer(e);
if (container.container.componentMeta.getMetadata().experimental?.isAbsoluteLayoutContainer) {
this.isAbsoluteLayoutContainer = true;
return;
}
}
this.isAbsoluteLayoutContainer = false;
}), }),
this.dragon.onDragend(() => { this.dragon.onDragend(() => {
this.dragObject = null; this.dragObject = null;
@ -84,6 +95,10 @@ export default class DragGhost extends Component<{ designer: Designer }> {
return null; return null;
} }
if (this.isAbsoluteLayoutContainer) {
return null;
}
return ( return (
<div <div
className="lc-ghost-group" className="lc-ghost-group"

View File

@ -1,7 +1,7 @@
import { Component as ReactComponent, ComponentType } from 'react'; import { Component as ReactComponent, ComponentType } from 'react';
import { ComponentMetadata, NodeSchema } from '@ali/lowcode-types'; import { ComponentMetadata, NodeSchema } from '@ali/lowcode-types';
import { ISensor, Point, ScrollTarget, IScrollable } from './designer'; import { ISensor, Point, ScrollTarget, IScrollable, LocateEvent, LocationData } from './designer';
import { Node } from './document'; import { Node, ParentalNode } from './document';
export type AutoFit = '100%'; export type AutoFit = '100%';
export const AutoFit = '100%'; export const AutoFit = '100%';
@ -60,6 +60,11 @@ export interface IViewport extends IScrollable {
toGlobalPoint(point: Point): Point; toGlobalPoint(point: Point): Point;
} }
export interface DropContainer {
container: ParentalNode;
instance: ComponentInstance;
}
/** /**
* *
*/ */
@ -143,6 +148,8 @@ export interface ISimulatorHost<P = object> extends ISensor {
findDOMNodes(instance: ComponentInstance, selector?: string): Array<Element | Text> | null; findDOMNodes(instance: ComponentInstance, selector?: string): Array<Element | Text> | null;
getDropContainer(e: LocateEvent): DropContainer | null;
/** /**
* *
*/ */