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

View File

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

View File

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

View File

@ -23,7 +23,20 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
} }
this.focusing = focusTracker.create({ 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: () => { onEsc: () => {
this.props.area.setVisible(false); this.props.area.setVisible(false);
}, },

View File

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

View File

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

View File

@ -1,5 +1,5 @@
import { designer } from './editor'; import { designer } from './editor';
import { DragObjectType, isNode } from '@ali/lowcode-designer'; import { DragObjectType, isNode, isDragNodeDataObject } from '@ali/lowcode-designer';
const dragon = designer.dragon; const dragon = designer.dragon;
const DragEngine = { const DragEngine = {
@ -36,7 +36,11 @@ const DragEngine = {
onDragend(func: (dragment: any, location: any, copy: any) => any) { onDragend(func: (dragment: any, location: any, copy: any) => any) {
return dragon.onDragend(({ dragObject, copy }) => { return dragon.onDragend(({ dragObject, copy }) => {
const loc = designer.currentDocument?.dropLocation; 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() { inDragging() {