From b8fa0c69e3ce4c18dff29b8c6c0273828f1169e7 Mon Sep 17 00:00:00 2001 From: kangwei Date: Thu, 7 May 2020 18:14:58 +0800 Subject: [PATCH] fix exclusive float pane --- packages/designer/src/designer/designer.ts | 5 ++++- packages/designer/src/designer/dragon.ts | 1 + .../editor-core/src/utils/focus-tracker.ts | 14 +++++++------ .../src/layouts/left-float-pane.tsx | 15 ++++++++++++- packages/editor-skeleton/src/skeleton.ts | 2 ++ .../editor-skeleton/src/widget/panel-dock.ts | 21 ++++++++++++++++--- packages/editor-skeleton/src/widget/panel.ts | 7 +++++++ packages/vision-preset/src/drag-engine.ts | 8 +++++-- 8 files changed, 60 insertions(+), 13 deletions(-) diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index f5881b262..2292b960d 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -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 中 */ diff --git a/packages/designer/src/designer/dragon.ts b/packages/designer/src/designer/dragon.ts index f58adc19a..feadee53e 100644 --- a/packages/designer/src/designer/dragon.ts +++ b/packages/designer/src/designer/dragon.ts @@ -365,6 +365,7 @@ export class Dragon { exception = ex; } } + designer.clearLocation(); handleEvents((doc) => { if (isBoostFromDragAPI) { diff --git a/packages/editor-core/src/utils/focus-tracker.ts b/packages/editor-core/src/utils/focus-tracker.ts index b6128a5f7..ffd09f68b 100644 --- a/packages/editor-core/src/utils/focus-tracker.ts +++ b/packages/editor-core/src/utils/focus-tracker.ts @@ -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) { diff --git a/packages/editor-skeleton/src/layouts/left-float-pane.tsx b/packages/editor-skeleton/src/layouts/left-float-pane.tsx index c28d7af91..44a8df171 100644 --- a/packages/editor-skeleton/src/layouts/left-float-pane.tsx +++ b/packages/editor-skeleton/src/layouts/left-float-pane.tsx @@ -23,7 +23,20 @@ export default class LeftFloatPane extends Component<{ area: Area }> } 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); }, diff --git a/packages/editor-skeleton/src/skeleton.ts b/packages/editor-skeleton/src/skeleton.ts index 2dcf9470a..a844d4377 100644 --- a/packages/editor-skeleton/src/skeleton.ts +++ b/packages/editor-skeleton/src/skeleton.ts @@ -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; } diff --git a/packages/editor-skeleton/src/widget/panel-dock.ts b/packages/editor-skeleton/src/widget/panel-dock.ts index d446eeba6..bd8297c2b 100644 --- a/packages/editor-skeleton/src/widget/panel-dock.ts +++ b/packages/editor-skeleton/src/widget/panel-dock.ts @@ -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; +} diff --git a/packages/editor-skeleton/src/widget/panel.ts b/packages/editor-skeleton/src/widget/panel.ts index 901545fe3..d72afba50 100644 --- a/packages/editor-skeleton/src/widget/panel.ts +++ b/packages/editor-skeleton/src/widget/panel.ts @@ -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 */ diff --git a/packages/vision-preset/src/drag-engine.ts b/packages/vision-preset/src/drag-engine.ts index 97849cd57..a4ecaaa1f 100644 --- a/packages/vision-preset/src/drag-engine.ts +++ b/packages/vision-preset/src/drag-engine.ts @@ -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() {