From 70120a033af95e4d09f3c152c7a6464c5b2ec683 Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 26 Apr 2023 15:34:02 +0800 Subject: [PATCH] feat: get editor from this or params --- .../bem-tools/border-resizing.tsx | 13 ++++---- .../bem-tools/border-selecting.tsx | 5 ++- .../live-editing/live-editing.ts | 17 +++++----- .../builtin-simulator/node-selector/index.tsx | 5 ++- packages/designer/src/component-meta.ts | 2 ++ .../designer/src/document/document-model.ts | 5 +++ packages/designer/src/document/history.ts | 13 ++++---- .../src/document/node/node-children.ts | 33 +++++++------------ .../settings/settings-primary-pane.tsx | 5 +-- .../src/components/widget-views/index.tsx | 14 +++----- packages/workspace/src/workspace.ts | 3 ++ 11 files changed, 53 insertions(+), 62 deletions(-) diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx index 29401ca6b..4b3c5c31a 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -1,10 +1,10 @@ import React, { Component, Fragment } from 'react'; import DragResizeEngine from './drag-resize-engine'; -import { observer, computed, globalContext } from '@alilc/lowcode-editor-core'; +import { observer, computed } from '@alilc/lowcode-editor-core'; import classNames from 'classnames'; import { SimulatorContext } from '../context'; import { BuiltinSimulatorHost } from '../host'; -import { OffsetObserver, Designer } from '../../designer'; +import { OffsetObserver, Designer, INode } from '../../designer'; import { Node } from '../../document'; import { normalizeTriggers } from '../../utils/misc'; @@ -135,7 +135,7 @@ export class BoxResizingInstance extends Component<{ // this.hoveringCapture.setBoundary(this.outline); this.willBind(); - const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { + const resize = (e: MouseEvent, direction: string, node: INode, moveX: number, moveY: number) => { const { advanced } = node.componentMeta; if ( advanced.callbacks && @@ -149,7 +149,7 @@ export class BoxResizingInstance extends Component<{ } }; - const resizeStart = (e: MouseEvent, direction: string, node: any) => { + const resizeStart = (e: MouseEvent, direction: string, node: INode) => { const { advanced } = node.componentMeta; if ( advanced.callbacks && @@ -161,7 +161,7 @@ export class BoxResizingInstance extends Component<{ } }; - const resizeEnd = (e: MouseEvent, direction: string, node: any) => { + const resizeEnd = (e: MouseEvent, direction: string, node: INode) => { const { advanced } = node.componentMeta; if ( advanced.callbacks && @@ -172,8 +172,7 @@ export class BoxResizingInstance extends Component<{ advanced.callbacks.onResizeEnd(e, cbNode); } - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = node.document?.designer.editor; const npm = node?.componentMeta?.npm; const selected = [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx index 75b4a3488..0e9d734b6 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx @@ -9,7 +9,7 @@ import { ComponentType, } from 'react'; import classNames from 'classnames'; -import { observer, computed, Tip, globalContext } from '@alilc/lowcode-editor-core'; +import { observer, computed, Tip } from '@alilc/lowcode-editor-core'; import { createIcon, isReactComponent, isActionContentObject } from '@alilc/lowcode-utils'; import { IPublicTypeActionContentObject } from '@alilc/lowcode-types'; import { BuiltinSimulatorHost } from '../host'; @@ -131,8 +131,7 @@ function createAction(content: ReactNode | ComponentType | IPublicTypeActio className="lc-borders-action" onClick={() => { action && action(node.internalToShellNode()!); - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = node.document?.designer.editor; const npm = node?.componentMeta?.npm; const selected = [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || diff --git a/packages/designer/src/builtin-simulator/live-editing/live-editing.ts b/packages/designer/src/builtin-simulator/live-editing/live-editing.ts index e92e266ee..c8594d701 100644 --- a/packages/designer/src/builtin-simulator/live-editing/live-editing.ts +++ b/packages/designer/src/builtin-simulator/live-editing/live-editing.ts @@ -1,6 +1,6 @@ -import { obx, globalContext } from '@alilc/lowcode-editor-core'; +import { obx } from '@alilc/lowcode-editor-core'; import { IPublicTypePluginConfig, IPublicTypeLiveTextEditingConfig } from '@alilc/lowcode-types'; -import { Node, Prop } from '../../document'; +import { INode, Prop } from '../../document'; const EDITOR_KEY = 'data-setter-prop'; @@ -17,7 +17,7 @@ function defaultSaveContent(content: string, prop: Prop) { } export interface EditingTarget { - node: Node; + node: INode; rootElement: HTMLElement; event: MouseEvent; } @@ -47,13 +47,16 @@ export class LiveEditing { @obx.ref private _editing: Prop | null = null; + private _dispose?: () => void; + + private _save?: () => void; + apply(target: EditingTarget) { const { node, event, rootElement } = target; const targetElement = event.target as HTMLElement; const { liveTextEditing } = node.componentMeta; - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = node.document?.designer.editor; const npm = node?.componentMeta?.npm; const selected = [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || ''; @@ -166,10 +169,6 @@ export class LiveEditing { return this._editing; } - private _dispose?: () => void; - - private _save?: () => void; - saveAndDispose() { if (this._save) { this._save(); diff --git a/packages/designer/src/builtin-simulator/node-selector/index.tsx b/packages/designer/src/builtin-simulator/node-selector/index.tsx index 09c8f1262..07ae754aa 100644 --- a/packages/designer/src/builtin-simulator/node-selector/index.tsx +++ b/packages/designer/src/builtin-simulator/node-selector/index.tsx @@ -1,6 +1,6 @@ import { Overlay } from '@alifd/next'; import React, { MouseEvent } from 'react'; -import { Title, globalContext } from '@alilc/lowcode-editor-core'; +import { Title } from '@alilc/lowcode-editor-core'; import { canClickNode } from '@alilc/lowcode-utils'; import './index.less'; @@ -66,8 +66,7 @@ export default class InstanceNodeSelector extends React.Component !!item).join('-') || diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index 4b0a613cb..00c495621 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -60,6 +60,8 @@ export function buildFilter(rule?: string | string[] | RegExp | IPublicTypeNesti export interface IComponentMeta extends IPublicModelComponentMeta { prototype?: any; + liveTextEditing?: IPublicTypeLiveTextEditingConfig[]; + get rootSelector(): string | undefined; setMetadata(metadata: IPublicTypeComponentMetadata): void; diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index c55e7a8e4..699775bc7 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -148,6 +148,10 @@ export interface IDocumentModel extends Omit implements IHistory { return this.session.data; } + private timeGap: number = 1000; + constructor( dataFn: () => T | null, private redoer: (data: T) => void, - private timeGap: number = 1000, + private document?: IDocumentModel, ) { this.session = new Session(0, null, this.timeGap); this.records = [this.session]; @@ -130,8 +133,7 @@ export class History implements IHistory { } const cursor = this.session.cursor - 1; this.go(cursor); - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = this.document?.designer.editor; if (!editor) { return; } @@ -144,8 +146,7 @@ export class History implements IHistory { } const cursor = this.session.cursor + 1; this.go(cursor); - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = this.document?.designer.editor; if (!editor) { return; } diff --git a/packages/designer/src/document/node/node-children.ts b/packages/designer/src/document/node/node-children.ts index 1b6df5866..4fb1c3d22 100644 --- a/packages/designer/src/document/node/node-children.ts +++ b/packages/designer/src/document/node/node-children.ts @@ -1,4 +1,4 @@ -import { obx, computed, globalContext, makeObservable, IEventBus, createModuleEventBus } from '@alilc/lowcode-editor-core'; +import { obx, computed, makeObservable, IEventBus, createModuleEventBus } from '@alilc/lowcode-editor-core'; import { Node, INode } from './node'; import { IPublicTypeNodeData, IPublicModelNodeChildren, IPublicEnumTransformStage, IPublicTypeDisposable } from '@alilc/lowcode-types'; import { shallowEqual, compatStage, isNodeSchema } from '@alilc/lowcode-utils'; @@ -16,12 +16,12 @@ export interface INodeChildren extends Omit, 'isEmpty' | 'notEmpty' > { + children: INode[]; + get owner(): INode; get length(): number; - children: INode[]; - unlinkChild(node: INode): void; /** @@ -239,11 +239,8 @@ export class NodeChildren implements INodeChildren { } const { document } = node; /* istanbul ignore next */ - if (globalContext.has('editor')) { - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); - editor.eventBus.emit('node.remove', { node, index: i }); - } + const editor = node.document?.designer.editor; + editor?.eventBus.emit('node.remove', { node, index: i }); document?.unlinkNode(node); document?.selection.remove(node.id); document?.destroyNode(node); @@ -281,14 +278,11 @@ export class NodeChildren implements INodeChildren { const i = children.map(d => d.id).indexOf(node.id); if (node.parent) { - if (globalContext.has('editor')) { - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); - editor.eventBus.emit('node.remove.topLevel', { - node, - index: node.index, - }); - } + const editor = node.document?.designer.editor; + editor?.eventBus.emit('node.remove.topLevel', { + node, + index: node.index, + }); } if (i < 0) { @@ -317,11 +311,8 @@ export class NodeChildren implements INodeChildren { }); this.emitter.emit('insert', node); /* istanbul ignore next */ - if (globalContext.has('editor')) { - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); - editor.eventBus.emit('node.add', { node }); - } + const editor = node.document?.designer.editor; + editor?.eventBus.emit('node.add', { node }); if (useMutator) { this.reportModified(node, this.owner, { type: 'insert' }); } diff --git a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx index 0bbef4bf2..800719588 100644 --- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx @@ -53,8 +53,7 @@ export class SettingsPrimaryPane extends Component { } // 抛出事件，对于有些需要 panel 插件随着 度变化进行再次渲染的，由panel插件内部监听事件实现 - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = this.props.panel.skeleton.editor; editor?.eventBus.emit('dockpane.drag', width); } onDragChange(type: 'start' | 'end') { - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = this.props.panel.skeleton.editor; editor?.eventBus.emit('dockpane.dragchange', type); // builtinSimulator 屏蔽掉 鼠标事件 editor?.eventBus.emit('designer.builtinSimulator.disabledEvents', type === 'start'); @@ -187,8 +185,7 @@ export class TitledPanelView extends Component<{ panel: Panel; area?: string }> if (!panel.inited) { return null; } - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = panel.skeleton.editor; const panelName = area ? `${area}-${panel.name}` : panel.name; editor?.eventBus.emit('skeleton.panel.toggle', { name: panelName || '', @@ -250,8 +247,7 @@ export class PanelView extends Component<{ if (!panel.inited) { return null; } - const workspace = globalContext.get('workspace'); - const editor = workspace.isActive ? workspace.window.editor : globalContext.get('editor'); + const editor = panel.skeleton.editor; const panelName = area ? `${area}-${panel.name}` : panel.name; editor?.eventBus.emit('skeleton.panel.toggle', { name: panelName || '', diff --git a/packages/workspace/src/workspace.ts b/packages/workspace/src/workspace.ts index c723d2b5c..26e1d6551 100644 --- a/packages/workspace/src/workspace.ts +++ b/packages/workspace/src/workspace.ts @@ -183,6 +183,9 @@ export class Workspace implements IWorkspace { } private remove(index: number) { + if (index < 0) { + return; + } const window = this.windows[index]; this.windows.splice(index, 1); if (this.window === window) {