mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 01:21:58 +00:00
fix exclusive float pane
This commit is contained in:
parent
80d342fa55
commit
b8fa0c69e3
@ -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 中
|
||||
*/
|
||||
|
||||
@ -365,6 +365,7 @@ export class Dragon {
|
||||
exception = ex;
|
||||
}
|
||||
}
|
||||
designer.clearLocation();
|
||||
|
||||
handleEvents((doc) => {
|
||||
if (isBoostFromDragAPI) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
},
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
@ -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() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user