fix exclusive float pane

This commit is contained in:
kangwei 2020-05-07 18:14:58 +08:00
parent 80d342fa55
commit b8fa0c69e3
8 changed files with 60 additions and 13 deletions

View File

@ -114,7 +114,6 @@ export class Designer {
}
}
}
this.clearLocation();
if (this.props?.onDragend) {
this.props.onDragend(e, loc);
}
@ -174,6 +173,10 @@ export class Designer {
}
private _dropLocation?: DropLocation;
get dropLocation() {
return this._dropLocation;
}
/**
* dragon
*/

View File

@ -365,6 +365,7 @@ export class Dragon {
exception = ex;
}
}
designer.clearLocation();
handleEvents((doc) => {
if (isBoostFromDragAPI) {

View File

@ -4,9 +4,10 @@ export class FocusTracker {
if (this.checkModalDown(e)) {
return;
}
if (this.first && !this.first.internalCheckInRange(e)) {
this.internalSuspenseItem(this.first);
this.first.internalTriggerBlur();
const first = this.first;
if (first && !first.internalCheckInRange(e)) {
this.internalSuspenseItem(first);
first.internalTriggerBlur();
}
};
win.document.addEventListener('mousedown', checkDown, true);
@ -42,9 +43,10 @@ export class FocusTracker {
}
}
execEsc() {
if (this.first) {
this.internalSuspenseItem(this.first);
this.first.internalTriggerEsc();
const first = this.first;
if (first) {
this.internalSuspenseItem(first);
first.internalTriggerEsc();
}
}
create(config: FocusableConfig) {

View File

@ -23,7 +23,20 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
}
this.focusing = focusTracker.create({
range: this.shell!,
range: (e) => {
const target = e.target as HTMLElement;
if (!target) {
return false;
}
if (this.shell?.contains(target)) {
return true;
}
const docks = area.current?.getAssocDocks();
if (docks && docks?.length) {
return docks.some(dock => dock.getDOMNode()?.contains(target));
}
return false;
},
onEsc: () => {
this.props.area.setVisible(false);
},

View File

@ -192,6 +192,7 @@ export class Skeleton {
this.editor.emit(event, ...args);
}
readonly widgets: IWidget[] = [];
createWidget(config: IWidgetBaseConfig | IWidget) {
if (isWidget(config)) {
return config;
@ -220,6 +221,7 @@ export class Skeleton {
} else {
widget = new Widget(this, config as WidgetConfig);
}
this.widgets.push(widget);
return widget;
}

View File

@ -1,15 +1,17 @@
import { obx, computed } from '@ali/lowcode-editor-core';
import { uniqueId } from '@ali/lowcode-utils';
import { createElement, ReactNode } from 'react';
import { createElement, ReactNode, ReactInstance } from 'react';
import { Skeleton } from '../skeleton';
import { PanelDockConfig } from '../types';
import Panel from './panel';
import { PanelDockView, WidgetView } from '../components/widget-views';
import { IWidget } from './widget';
import { composeTitle } from './utils';
import { findDOMNode } from 'react-dom';
export default class PanelDock implements IWidget {
readonly isWidget = true;
readonly isPanelDock = true;
readonly id: string;
readonly name: string;
readonly align?: string;
@ -31,13 +33,21 @@ export default class PanelDock implements IWidget {
return this._body;
}
private _shell: ReactInstance | null = null;
get content(): ReactNode {
return createElement(WidgetView, {
widget: this,
ref: (ref) => {
this._shell = ref;
},
key: this.id,
});
}
getDOMNode() {
return this._shell ? findDOMNode(this._shell) : null;
}
@obx.ref private _visible: boolean = true;
get visible() {
return this._visible;
@ -64,12 +74,12 @@ export default class PanelDock implements IWidget {
_panelProps.title = composeTitle(props.title, undefined, props.description, true, true);
}
this._panel = this.skeleton.add({
type: "Panel",
type: 'Panel',
name: this.panelName,
props: _panelProps,
contentProps,
content,
area: panelProps?.area
area: panelProps?.area,
}) as Panel;
}
}
@ -117,3 +127,8 @@ export default class PanelDock implements IWidget {
this.panel?.setActive(true);
}
}
export function isPanelDock(obj: any): obj is PanelDock {
return obj && obj.isPanelDock;
}

View File

@ -9,6 +9,7 @@ import { TitledPanelView, TabsPanelView, PanelView } from '../components/widget-
import { Skeleton } from '../skeleton';
import { composeTitle } from './utils';
import { IWidget } from './widget';
import PanelDock, { isPanelDock } from './panel-dock';
export default class Panel implements IWidget {
readonly isWidget = true;
@ -168,6 +169,12 @@ export default class Panel implements IWidget {
this.setActive(true);
}
getAssocDocks(): PanelDock[] {
return this.skeleton.widgets.filter(item => {
return isPanelDock(item) && item.panelName === this.name;
}) as any;
}
/**
* @deprecated
*/

View File

@ -1,5 +1,5 @@
import { designer } from './editor';
import { DragObjectType, isNode } from '@ali/lowcode-designer';
import { DragObjectType, isNode, isDragNodeDataObject } from '@ali/lowcode-designer';
const dragon = designer.dragon;
const DragEngine = {
@ -36,7 +36,11 @@ const DragEngine = {
onDragend(func: (dragment: any, location: any, copy: any) => any) {
return dragon.onDragend(({ dragObject, copy }) => {
const loc = designer.currentDocument?.dropLocation;
func(dragObject.nodes[0], loc, copy);
if (isDragNodeDataObject(dragObject)) {
func(dragObject.data, loc, copy);
} else {
func(dragObject.nodes[0], loc, copy);
}
});
},
inDragging() {