mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-12 03:01:16 +00:00
feat(shell): add editor-view model
This commit is contained in:
parent
c50a0823db
commit
358dde43a4
21
docs/docs/api/model/editor-view.md
Normal file
21
docs/docs/api/model/editor-view.md
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
title: EditorView
|
||||||
|
sidebar_position: 12
|
||||||
|
---
|
||||||
|
|
||||||
|
> **[@experimental](./#experimental)**<br/>
|
||||||
|
> **@types** [IPublicModelEditorView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/editor-view.ts)<br/>
|
||||||
|
> **@since** v1.1.7
|
||||||
|
|
||||||
|
窗口编辑视图
|
||||||
|
|
||||||
|
## 类型定义
|
||||||
|
|
||||||
|
```
|
||||||
|
import { IPublicModelPluginContext } from "./plugin-context";
|
||||||
|
|
||||||
|
export interface IPublicModelEditorView extends IPublicModelPluginContext {};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
相关类型定义: [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts)
|
||||||
@ -38,6 +38,22 @@ sidebar_position: 12
|
|||||||
|
|
||||||
关联模型 [IPublicModelResource](./resource)
|
关联模型 [IPublicModelResource](./resource)
|
||||||
|
|
||||||
|
### currentEditorView
|
||||||
|
窗口当前视图
|
||||||
|
|
||||||
|
`@type {IPublicModelEditorView}`
|
||||||
|
|
||||||
|
关联模型 [IPublicModelEditorView](./editor-view)
|
||||||
|
|
||||||
|
### editorViews
|
||||||
|
|
||||||
|
窗口所有视图
|
||||||
|
|
||||||
|
`@type {IPublicModelEditorView[]}`
|
||||||
|
|
||||||
|
关联模型 [IPublicModelEditorView](./editor-view)
|
||||||
|
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
### importSchema
|
### importSchema
|
||||||
|
|||||||
@ -17,6 +17,7 @@ import {
|
|||||||
IPublicTypePluginMeta,
|
IPublicTypePluginMeta,
|
||||||
IPublicTypePluginRegisterOptions,
|
IPublicTypePluginRegisterOptions,
|
||||||
IPublicModelWindow,
|
IPublicModelWindow,
|
||||||
|
IPublicEnumPluginRegisterLevel,
|
||||||
} from '@alilc/lowcode-types';
|
} from '@alilc/lowcode-types';
|
||||||
import PluginContext from './plugin-context';
|
import PluginContext from './plugin-context';
|
||||||
|
|
||||||
@ -58,6 +59,7 @@ export interface ILowCodePluginContextPrivate {
|
|||||||
set canvas(canvas: IPublicApiCanvas);
|
set canvas(canvas: IPublicApiCanvas);
|
||||||
set workspace(workspace: IPublicApiWorkspace);
|
set workspace(workspace: IPublicApiWorkspace);
|
||||||
set editorWindow(window: IPublicModelWindow);
|
set editorWindow(window: IPublicModelWindow);
|
||||||
|
set registerLevel(level: IPublicEnumPluginRegisterLevel);
|
||||||
}
|
}
|
||||||
export interface ILowCodePluginContextApiAssembler {
|
export interface ILowCodePluginContextApiAssembler {
|
||||||
assembleApis(
|
assembleApis(
|
||||||
|
|||||||
@ -18,6 +18,7 @@ import {
|
|||||||
IPublicTypeDisposable,
|
IPublicTypeDisposable,
|
||||||
IPublicApiPlugins,
|
IPublicApiPlugins,
|
||||||
IPublicApiWorkspace,
|
IPublicApiWorkspace,
|
||||||
|
IPublicEnumPluginRegisterLevel,
|
||||||
} from '@alilc/lowcode-types';
|
} from '@alilc/lowcode-types';
|
||||||
import {
|
import {
|
||||||
Designer,
|
Designer,
|
||||||
@ -138,6 +139,7 @@ const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
|
|||||||
context.plugins = plugins;
|
context.plugins = plugins;
|
||||||
context.logger = new Logger({ level: 'warn', bizName: `plugin:${pluginName}` });
|
context.logger = new Logger({ level: 'warn', bizName: `plugin:${pluginName}` });
|
||||||
context.workspace = workspace;
|
context.workspace = workspace;
|
||||||
|
context.registerLevel = IPublicEnumPluginRegisterLevel.Default;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -13,8 +13,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@alifd/next": "^1.19.16",
|
"@alifd/next": "^1.19.16",
|
||||||
"@alilc/lowcode-designer": "1.1.6",
|
|
||||||
"@alilc/lowcode-editor-core": "1.1.6",
|
|
||||||
"@alilc/lowcode-types": "1.1.6",
|
"@alilc/lowcode-types": "1.1.6",
|
||||||
"@alilc/lowcode-utils": "1.1.6",
|
"@alilc/lowcode-utils": "1.1.6",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
|
|||||||
@ -16,16 +16,15 @@ import {
|
|||||||
IPublicModelDropLocation,
|
IPublicModelDropLocation,
|
||||||
IPublicModelScroller,
|
IPublicModelScroller,
|
||||||
IPublicModelScrollTarget,
|
IPublicModelScrollTarget,
|
||||||
IPublicModelPluginContext,
|
|
||||||
IPublicModelLocateEvent,
|
IPublicModelLocateEvent,
|
||||||
} from '@alilc/lowcode-types';
|
} from '@alilc/lowcode-types';
|
||||||
import TreeNode from './tree-node';
|
import TreeNode from './tree-node';
|
||||||
import { IndentTrack } from '../helper/indent-track';
|
import { IndentTrack } from '../helper/indent-track';
|
||||||
import DwellTimer from '../helper/dwell-timer';
|
import DwellTimer from '../helper/dwell-timer';
|
||||||
import { ITreeBoard, TreeMaster } from './tree-master';
|
import { IOutlinePanelPluginContext, ITreeBoard, TreeMaster } from './tree-master';
|
||||||
|
|
||||||
export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTypeScrollable {
|
export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTypeScrollable {
|
||||||
private pluginContext: IPublicModelPluginContext;
|
private pluginContext: IOutlinePanelPluginContext;
|
||||||
|
|
||||||
private treeMaster?: TreeMaster;
|
private treeMaster?: TreeMaster;
|
||||||
|
|
||||||
@ -100,8 +99,8 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
|
|||||||
|
|
||||||
private _shell: HTMLDivElement | null = null;
|
private _shell: HTMLDivElement | null = null;
|
||||||
|
|
||||||
constructor(at: string | symbol, pluginContext: IPublicModelPluginContext, treeMaster: TreeMaster) {
|
constructor(at: string | symbol, treeMaster: TreeMaster) {
|
||||||
this.pluginContext = pluginContext;
|
this.pluginContext = treeMaster.pluginContext;
|
||||||
this.treeMaster = treeMaster;
|
this.treeMaster = treeMaster;
|
||||||
this.at = at;
|
this.at = at;
|
||||||
let inited = false;
|
let inited = false;
|
||||||
@ -237,7 +236,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
|
|||||||
let { node } = treeNode;
|
let { node } = treeNode;
|
||||||
if (isDragNodeObject(dragObject)) {
|
if (isDragNodeObject(dragObject)) {
|
||||||
const newNodes = operationalNodes;
|
const newNodes = operationalNodes;
|
||||||
let i = newNodes.length;
|
let i = newNodes?.length;
|
||||||
let p: any = node;
|
let p: any = node;
|
||||||
while (i-- > 0) {
|
while (i-- > 0) {
|
||||||
if (newNodes[i].contains(p)) {
|
if (newNodes[i].contains(p)) {
|
||||||
@ -482,7 +481,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
|
|||||||
const isSlotContainer = treeNode.hasSlots();
|
const isSlotContainer = treeNode.hasSlots();
|
||||||
const isContainer = treeNode.isContainer();
|
const isContainer = treeNode.isContainer();
|
||||||
|
|
||||||
if (container.isSlot && !treeNode.expanded) {
|
if (container.isSlotNode && !treeNode.expanded) {
|
||||||
// 未展开,直接定位到内部第一个节点
|
// 未展开,直接定位到内部第一个节点
|
||||||
if (isSlotContainer) {
|
if (isSlotContainer) {
|
||||||
detail.index = null;
|
detail.index = null;
|
||||||
|
|||||||
@ -1,29 +1,100 @@
|
|||||||
import { isLocationChildrenDetail } from '@alilc/lowcode-utils';
|
import { isLocationChildrenDetail } from '@alilc/lowcode-utils';
|
||||||
import { IPublicModelPluginContext, IPublicTypeActiveTarget, IPublicModelNode } from '@alilc/lowcode-types';
|
import { IPublicModelPluginContext, IPublicTypeActiveTarget, IPublicModelNode, IPublicTypeDisposable, IPublicEnumPluginRegisterLevel } from '@alilc/lowcode-types';
|
||||||
import TreeNode from './tree-node';
|
import TreeNode from './tree-node';
|
||||||
import { Tree } from './tree';
|
import { Tree } from './tree';
|
||||||
|
import EventEmitter from 'events';
|
||||||
|
import { enUS, zhCN } from '../locale';
|
||||||
|
import { ReactNode } from 'react';
|
||||||
|
|
||||||
export interface ITreeBoard {
|
export interface ITreeBoard {
|
||||||
readonly at: string | symbol;
|
readonly at: string | symbol;
|
||||||
scrollToNode(treeNode: TreeNode, detail?: any): void;
|
scrollToNode(treeNode: TreeNode, detail?: any): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
enum EVENT_NAMES {
|
||||||
|
pluginContextChanged = 'pluginContextChanged',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IOutlinePanelPluginContext extends IPublicModelPluginContext {
|
||||||
|
extraTitle?: string;
|
||||||
|
intlNode(id: string, params?: object): ReactNode;
|
||||||
|
intl(id: string, params?: object): string;
|
||||||
|
getLocale(): string;
|
||||||
|
}
|
||||||
|
|
||||||
export class TreeMaster {
|
export class TreeMaster {
|
||||||
readonly pluginContext: IPublicModelPluginContext;
|
pluginContext: IOutlinePanelPluginContext;
|
||||||
|
|
||||||
private boards = new Set<ITreeBoard>();
|
private boards = new Set<ITreeBoard>();
|
||||||
|
|
||||||
private treeMap = new Map<string, Tree>();
|
private treeMap = new Map<string, Tree>();
|
||||||
|
|
||||||
constructor(pluginContext: IPublicModelPluginContext) {
|
private disposeEvents: (IPublicTypeDisposable | undefined)[] = [];
|
||||||
this.pluginContext = pluginContext;
|
|
||||||
|
event = new EventEmitter();
|
||||||
|
|
||||||
|
constructor(pluginContext: IPublicModelPluginContext, readonly options: {
|
||||||
|
extraTitle?: string;
|
||||||
|
}) {
|
||||||
|
this.setPluginContext(pluginContext);
|
||||||
|
const { workspace } = this.pluginContext;
|
||||||
|
this.initEvent();
|
||||||
|
if (pluginContext.registerLevel === IPublicEnumPluginRegisterLevel.Workspace) {
|
||||||
|
workspace.onWindowRendererReady(() => {
|
||||||
|
this.setPluginContext(workspace.window?.currentEditorView);
|
||||||
|
let dispose: IPublicTypeDisposable | undefined;
|
||||||
|
const windowViewTypeChangeEvent = () => {
|
||||||
|
dispose = workspace.window?.onChangeViewType(() => {
|
||||||
|
this.setPluginContext(workspace.window?.currentEditorView);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
windowViewTypeChangeEvent();
|
||||||
|
|
||||||
|
workspace.onChangeActiveWindow(() => {
|
||||||
|
windowViewTypeChangeEvent();
|
||||||
|
this.setPluginContext(workspace.window?.currentEditorView);
|
||||||
|
dispose && dispose();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setPluginContext(pluginContext: IPublicModelPluginContext | undefined) {
|
||||||
|
if (!pluginContext) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { intl, intlNode, getLocale } = pluginContext.common.utils.createIntl({
|
||||||
|
'en-US': enUS,
|
||||||
|
'zh-CN': zhCN,
|
||||||
|
});
|
||||||
|
let _pluginContext: IOutlinePanelPluginContext = Object.assign(pluginContext, {
|
||||||
|
intl,
|
||||||
|
intlNode,
|
||||||
|
getLocale,
|
||||||
|
});
|
||||||
|
_pluginContext.extraTitle = this.options && this.options['extraTitle'];
|
||||||
|
this.pluginContext = _pluginContext;
|
||||||
|
this.disposeEvent();
|
||||||
|
this.initEvent();
|
||||||
|
this.emitPluginContextChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
private disposeEvent() {
|
||||||
|
this.disposeEvents.forEach(d => {
|
||||||
|
d && d();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private initEvent() {
|
||||||
let startTime: any;
|
let startTime: any;
|
||||||
const { event, project, canvas } = this.pluginContext;
|
const { event, project, canvas } = this.pluginContext;
|
||||||
|
this.disposeEvents = [
|
||||||
canvas.dragon?.onDragstart(() => {
|
canvas.dragon?.onDragstart(() => {
|
||||||
startTime = Date.now() / 1000;
|
startTime = Date.now() / 1000;
|
||||||
// needs?
|
// needs?
|
||||||
this.toVision();
|
this.toVision();
|
||||||
});
|
}),
|
||||||
canvas.activeTracker?.onChange((target: IPublicTypeActiveTarget) => {
|
canvas.activeTracker?.onChange((target: IPublicTypeActiveTarget) => {
|
||||||
const { node, detail } = target;
|
const { node, detail } = target;
|
||||||
const tree = this.currentTree;
|
const tree = this.currentTree;
|
||||||
@ -39,7 +110,7 @@ export class TreeMaster {
|
|||||||
this.boards.forEach((board) => {
|
this.boards.forEach((board) => {
|
||||||
board.scrollToNode(treeNode, detail);
|
board.scrollToNode(treeNode, detail);
|
||||||
});
|
});
|
||||||
});
|
}),
|
||||||
canvas.dragon?.onDragend(() => {
|
canvas.dragon?.onDragend(() => {
|
||||||
const endTime: any = Date.now() / 1000;
|
const endTime: any = Date.now() / 1000;
|
||||||
const nodes = project.currentDocument?.selection?.getNodes();
|
const nodes = project.currentDocument?.selection?.getNodes();
|
||||||
@ -57,11 +128,12 @@ export class TreeMaster {
|
|||||||
.join('&'),
|
.join('&'),
|
||||||
time: (endTime - startTime).toFixed(2),
|
time: (endTime - startTime).toFixed(2),
|
||||||
});
|
});
|
||||||
});
|
}),
|
||||||
project.onRemoveDocument((data: {id: string}) => {
|
project.onRemoveDocument((data: {id: string}) => {
|
||||||
const { id } = data;
|
const { id } = data;
|
||||||
this.treeMap.delete(id);
|
this.treeMap.delete(id);
|
||||||
});
|
}),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
private toVision() {
|
private toVision() {
|
||||||
@ -86,6 +158,14 @@ export class TreeMaster {
|
|||||||
// todo others purge
|
// todo others purge
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onPluginContextChange(fn: () => void) {
|
||||||
|
this.event.on(EVENT_NAMES.pluginContextChanged, fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
emitPluginContextChange() {
|
||||||
|
this.event.emit(EVENT_NAMES.pluginContextChanged);
|
||||||
|
}
|
||||||
|
|
||||||
get currentTree(): Tree | null {
|
get currentTree(): Tree | null {
|
||||||
const doc = this.pluginContext.project.getCurrentDocument();
|
const doc = this.pluginContext.project.getCurrentDocument();
|
||||||
if (doc) {
|
if (doc) {
|
||||||
@ -93,7 +173,7 @@ export class TreeMaster {
|
|||||||
if (this.treeMap.has(id)) {
|
if (this.treeMap.has(id)) {
|
||||||
return this.treeMap.get(id)!;
|
return this.treeMap.get(id)!;
|
||||||
}
|
}
|
||||||
const tree = new Tree(this.pluginContext);
|
const tree = new Tree(this);
|
||||||
this.treeMap.set(id, tree);
|
this.treeMap.set(id, tree);
|
||||||
return tree;
|
return tree;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,12 +2,12 @@ import {
|
|||||||
IPublicTypeTitleContent,
|
IPublicTypeTitleContent,
|
||||||
IPublicTypeLocationChildrenDetail,
|
IPublicTypeLocationChildrenDetail,
|
||||||
IPublicModelNode,
|
IPublicModelNode,
|
||||||
IPublicModelPluginContext,
|
|
||||||
IPublicTypeDisposable,
|
IPublicTypeDisposable,
|
||||||
} from '@alilc/lowcode-types';
|
} from '@alilc/lowcode-types';
|
||||||
import { isI18nData, isLocationChildrenDetail } from '@alilc/lowcode-utils';
|
import { isI18nData, isLocationChildrenDetail } from '@alilc/lowcode-utils';
|
||||||
import EventEmitter from 'events';
|
import EventEmitter from 'events';
|
||||||
import { Tree } from './tree';
|
import { Tree } from './tree';
|
||||||
|
import { IOutlinePanelPluginContext } from './tree-master';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 大纲树过滤结果
|
* 大纲树过滤结果
|
||||||
@ -38,7 +38,7 @@ enum EVENT_NAMES {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default class TreeNode {
|
export default class TreeNode {
|
||||||
readonly pluginContext: IPublicModelPluginContext;
|
readonly pluginContext: IOutlinePanelPluginContext;
|
||||||
event = new EventEmitter();
|
event = new EventEmitter();
|
||||||
|
|
||||||
private _node: IPublicModelNode;
|
private _node: IPublicModelNode;
|
||||||
@ -160,9 +160,9 @@ export default class TreeNode {
|
|||||||
return this._node;
|
return this._node;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(tree: Tree, node: IPublicModelNode, pluginContext: IPublicModelPluginContext) {
|
constructor(tree: Tree, node: IPublicModelNode) {
|
||||||
this.tree = tree;
|
this.tree = tree;
|
||||||
this.pluginContext = pluginContext;
|
this.pluginContext = tree.pluginContext;
|
||||||
this._node = node;
|
this._node = node;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
import TreeNode from './tree-node';
|
import TreeNode from './tree-node';
|
||||||
import { IPublicModelNode, IPublicModelPluginContext, IPublicTypePropChangeOptions } from '@alilc/lowcode-types';
|
import { IPublicModelNode, IPublicTypePropChangeOptions } from '@alilc/lowcode-types';
|
||||||
|
import { IOutlinePanelPluginContext, TreeMaster } from './tree-master';
|
||||||
|
|
||||||
export class Tree {
|
export class Tree {
|
||||||
private treeNodesMap = new Map<string, TreeNode>();
|
private treeNodesMap = new Map<string, TreeNode>();
|
||||||
|
|
||||||
readonly id: string | undefined;
|
readonly id: string | undefined;
|
||||||
|
|
||||||
readonly pluginContext: IPublicModelPluginContext;
|
readonly pluginContext: IOutlinePanelPluginContext;
|
||||||
|
|
||||||
get root(): TreeNode | null {
|
get root(): TreeNode | null {
|
||||||
if (this.pluginContext.project.currentDocument?.focusNode) {
|
if (this.pluginContext.project.currentDocument?.focusNode) {
|
||||||
@ -15,8 +16,11 @@ export class Tree {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(pluginContext: IPublicModelPluginContext) {
|
readonly treeMaster: TreeMaster;
|
||||||
this.pluginContext = pluginContext;
|
|
||||||
|
constructor(treeMaster: TreeMaster) {
|
||||||
|
this.treeMaster = treeMaster;
|
||||||
|
this.pluginContext = treeMaster.pluginContext;
|
||||||
const doc = this.pluginContext.project.currentDocument;
|
const doc = this.pluginContext.project.currentDocument;
|
||||||
this.id = doc?.id;
|
this.id = doc?.id;
|
||||||
|
|
||||||
@ -51,7 +55,7 @@ export class Tree {
|
|||||||
return tnode;
|
return tnode;
|
||||||
}
|
}
|
||||||
|
|
||||||
const treeNode = new TreeNode(this, node, this.pluginContext);
|
const treeNode = new TreeNode(this, node);
|
||||||
this.treeNodesMap.set(node.id, treeNode);
|
this.treeNodesMap.set(node.id, treeNode);
|
||||||
return treeNode;
|
return treeNode;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,21 +1,13 @@
|
|||||||
import { Pane } from './views/pane';
|
import { Pane } from './views/pane';
|
||||||
import { IconOutline } from './icons/outline';
|
import { IconOutline } from './icons/outline';
|
||||||
import { IPublicModelPluginContext, IPublicModelDocumentModel } from '@alilc/lowcode-types';
|
import { IPublicModelPluginContext, IPublicModelDocumentModel } from '@alilc/lowcode-types';
|
||||||
import { enUS, zhCN } from './locale';
|
|
||||||
import { MasterPaneName, BackupPaneName } from './helper/consts';
|
import { MasterPaneName, BackupPaneName } from './helper/consts';
|
||||||
import { TreeMaster } from './controllers/tree-master';
|
import { TreeMaster } from './controllers/tree-master';
|
||||||
import { PaneController } from './controllers/pane-controller';
|
import { PaneController } from './controllers/pane-controller';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
|
export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
|
||||||
const { skeleton, config, common, event, canvas, project } = ctx;
|
const { skeleton, config, canvas, project } = ctx;
|
||||||
const { intl, intlNode, getLocale } = common.utils.createIntl({
|
|
||||||
'en-US': enUS,
|
|
||||||
'zh-CN': zhCN,
|
|
||||||
});
|
|
||||||
ctx.intl = intl;
|
|
||||||
ctx.intlNode = intlNode;
|
|
||||||
ctx.getLocale = getLocale;
|
|
||||||
ctx.extraTitle = options && options['extraTitle'];
|
|
||||||
|
|
||||||
let isInFloatArea = true;
|
let isInFloatArea = true;
|
||||||
const hasPreferenceForOutline = config.getPreference().contains('outline-pane-pinned-status-isFloat', 'skeleton');
|
const hasPreferenceForOutline = config.getPreference().contains('outline-pane-pinned-status-isFloat', 'skeleton');
|
||||||
@ -26,8 +18,7 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
|
|||||||
masterPane: false,
|
masterPane: false,
|
||||||
backupPane: false,
|
backupPane: false,
|
||||||
};
|
};
|
||||||
const treeMaster = new TreeMaster(ctx);
|
const treeMaster = new TreeMaster(ctx, options);
|
||||||
let masterPaneController: PaneController | null = null;
|
|
||||||
let backupPaneController: PaneController | null = null;
|
let backupPaneController: PaneController | null = null;
|
||||||
return {
|
return {
|
||||||
async init() {
|
async init() {
|
||||||
@ -40,16 +31,20 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
|
|||||||
name: MasterPaneName,
|
name: MasterPaneName,
|
||||||
props: {
|
props: {
|
||||||
icon: IconOutline,
|
icon: IconOutline,
|
||||||
description: intlNode('Outline Tree'),
|
description: treeMaster.pluginContext.intlNode('Outline Tree'),
|
||||||
},
|
},
|
||||||
content: (props: any) => {
|
content: function Context(props: any) {
|
||||||
masterPaneController = new PaneController(MasterPaneName, ctx, treeMaster);
|
const [masterPaneController, setMasterPaneController] = useState(new PaneController(MasterPaneName, treeMaster));
|
||||||
|
treeMaster.onPluginContextChange(() => {
|
||||||
|
setMasterPaneController(new PaneController(MasterPaneName, treeMaster));
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Pane
|
<Pane
|
||||||
config={config}
|
config={config}
|
||||||
pluginContext={ctx}
|
|
||||||
treeMaster={treeMaster}
|
treeMaster={treeMaster}
|
||||||
controller={masterPaneController}
|
controller={masterPaneController}
|
||||||
|
key={masterPaneController.id}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -73,10 +68,9 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
|
|||||||
hiddenWhenInit: true,
|
hiddenWhenInit: true,
|
||||||
},
|
},
|
||||||
content: (props: any) => {
|
content: (props: any) => {
|
||||||
backupPaneController = new PaneController(BackupPaneName, ctx, treeMaster);
|
backupPaneController = new PaneController(BackupPaneName, treeMaster);
|
||||||
return (
|
return (
|
||||||
<Pane
|
<Pane
|
||||||
pluginContext={ctx}
|
|
||||||
treeMaster={treeMaster}
|
treeMaster={treeMaster}
|
||||||
controller={backupPaneController}
|
controller={backupPaneController}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
@ -5,11 +5,9 @@ import { Search, Checkbox, Balloon, Divider } from '@alifd/next';
|
|||||||
import TreeNode from '../controllers/tree-node';
|
import TreeNode from '../controllers/tree-node';
|
||||||
import { Tree } from '../controllers/tree';
|
import { Tree } from '../controllers/tree';
|
||||||
import { matchTreeNode, FILTER_OPTIONS } from './filter-tree';
|
import { matchTreeNode, FILTER_OPTIONS } from './filter-tree';
|
||||||
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
|
||||||
|
|
||||||
export default class Filter extends PureComponent<{
|
export default class Filter extends PureComponent<{
|
||||||
tree: Tree;
|
tree: Tree;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
}, {
|
}, {
|
||||||
keywords: string;
|
keywords: string;
|
||||||
filterOps: string[];
|
filterOps: string[];
|
||||||
@ -53,14 +51,16 @@ export default class Filter extends PureComponent<{
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="lc-outline-filter">
|
<div className="lc-outline-filter">
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Search
|
<Search
|
||||||
hasClear
|
hasClear
|
||||||
shape="simple"
|
shape="simple"
|
||||||
placeholder={this.props.pluginContext.intl('Filter Node')}
|
placeholder={this.props.tree.pluginContext.intl('Filter Node')}
|
||||||
className="lc-outline-filter-search-input"
|
className="lc-outline-filter-search-input"
|
||||||
value={keywords}
|
value={keywords}
|
||||||
onChange={this.handleSearchChange}
|
onChange={this.handleSearchChange}
|
||||||
/>
|
/>
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Balloon
|
<Balloon
|
||||||
v2
|
v2
|
||||||
align="br"
|
align="br"
|
||||||
@ -72,14 +72,17 @@ export default class Filter extends PureComponent<{
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={checkAll}
|
checked={checkAll}
|
||||||
indeterminate={indeterminate}
|
indeterminate={indeterminate}
|
||||||
onChange={this.handleCheckAll}
|
onChange={this.handleCheckAll}
|
||||||
>
|
>
|
||||||
{this.props.pluginContext.intlNode('Check All')}
|
{this.props.tree.pluginContext.intlNode('Check All')}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Divider />
|
<Divider />
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Checkbox.Group
|
<Checkbox.Group
|
||||||
value={filterOps}
|
value={filterOps}
|
||||||
direction="ver"
|
direction="ver"
|
||||||
@ -91,7 +94,7 @@ export default class Filter extends PureComponent<{
|
|||||||
value={op.value}
|
value={op.value}
|
||||||
key={op.value}
|
key={op.value}
|
||||||
>
|
>
|
||||||
{this.props.pluginContext.intlNode(op.label)}
|
{this.props.tree.pluginContext.intlNode(op.label)}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
))}
|
))}
|
||||||
</Checkbox.Group>
|
</Checkbox.Group>
|
||||||
|
|||||||
@ -1,47 +1,71 @@
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
|
import { Loading } from '@alifd/next';
|
||||||
import { PaneController } from '../controllers/pane-controller';
|
import { PaneController } from '../controllers/pane-controller';
|
||||||
import TreeView from './tree';
|
import TreeView from './tree';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
|
||||||
import Filter from './filter';
|
import Filter from './filter';
|
||||||
import { TreeMaster } from '../controllers/tree-master';
|
import { TreeMaster } from '../controllers/tree-master';
|
||||||
|
import { Tree } from '../controllers/tree';
|
||||||
|
import { IPublicTypeDisposable } from '@alilc/lowcode-types';
|
||||||
|
|
||||||
export class Pane extends PureComponent<{
|
export class Pane extends PureComponent<{
|
||||||
config: any;
|
config: any;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
treeMaster: TreeMaster;
|
treeMaster: TreeMaster;
|
||||||
controller: PaneController;
|
controller: PaneController;
|
||||||
|
}, {
|
||||||
|
tree: Tree | null;
|
||||||
}> {
|
}> {
|
||||||
private controller;
|
private controller;
|
||||||
private treeMaster: TreeMaster;
|
|
||||||
|
private dispose: IPublicTypeDisposable;
|
||||||
|
|
||||||
constructor(props: any) {
|
constructor(props: any) {
|
||||||
super(props);
|
super(props);
|
||||||
const { controller, treeMaster } = props;
|
const { controller, treeMaster } = props;
|
||||||
this.treeMaster = treeMaster;
|
|
||||||
this.controller = controller;
|
this.controller = controller;
|
||||||
|
this.state = {
|
||||||
|
tree: treeMaster.currentTree,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this.controller.purge();
|
this.controller.purge();
|
||||||
|
this.dispose && this.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.dispose = this.props.treeMaster.pluginContext.project.onSimulatorRendererReady(() => {
|
||||||
|
this.setState({
|
||||||
|
tree: this.props.treeMaster.currentTree,
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const tree = this.treeMaster.currentTree;
|
const tree = this.state.tree;
|
||||||
|
|
||||||
if (!tree) {
|
if (!tree) {
|
||||||
return (
|
return (
|
||||||
<div className="lc-outline-pane">
|
<div className="lc-outline-pane">
|
||||||
<p className="lc-outline-notice">{this.props.pluginContext.intl('Initializing')}</p>
|
<p className="lc-outline-notice">
|
||||||
|
{/* @ts-ignore */}
|
||||||
|
<Loading
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
marginTop: '40px',
|
||||||
|
}}
|
||||||
|
tip={this.props.treeMaster.pluginContext.intl('Initializing')}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="lc-outline-pane">
|
<div className="lc-outline-pane">
|
||||||
<Filter tree={tree} pluginContext={this.props.pluginContext} />
|
<Filter tree={tree} />
|
||||||
<div ref={(shell) => this.controller.mount(shell)} className="lc-outline-tree-container">
|
<div ref={(shell) => this.controller.mount(shell)} className="lc-outline-tree-container">
|
||||||
<TreeView key={tree.id} tree={tree} pluginContext={this.props.pluginContext} />
|
<TreeView key={tree.id} tree={tree} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -2,12 +2,11 @@ import { PureComponent } from 'react';
|
|||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import TreeNode from '../controllers/tree-node';
|
import TreeNode from '../controllers/tree-node';
|
||||||
import TreeNodeView from './tree-node';
|
import TreeNodeView from './tree-node';
|
||||||
import { IPublicModelPluginContext, IPublicModelExclusiveGroup, IPublicTypeDisposable, IPublicTypeLocationChildrenDetail } from '@alilc/lowcode-types';
|
import { IPublicModelExclusiveGroup, IPublicTypeDisposable, IPublicTypeLocationChildrenDetail } from '@alilc/lowcode-types';
|
||||||
|
|
||||||
export default class TreeBranches extends PureComponent<{
|
export default class TreeBranches extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
isModal?: boolean;
|
isModal?: boolean;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
expanded: boolean;
|
expanded: boolean;
|
||||||
treeChildren: TreeNode[] | null;
|
treeChildren: TreeNode[] | null;
|
||||||
}> {
|
}> {
|
||||||
@ -51,12 +50,11 @@ export default class TreeBranches extends PureComponent<{
|
|||||||
return (
|
return (
|
||||||
<div className="tree-node-branches">
|
<div className="tree-node-branches">
|
||||||
{
|
{
|
||||||
!isModal && <TreeNodeSlots treeNode={treeNode} pluginContext={this.props.pluginContext} />
|
!isModal && <TreeNodeSlots treeNode={treeNode} />
|
||||||
}
|
}
|
||||||
<TreeNodeChildren
|
<TreeNodeChildren
|
||||||
treeNode={treeNode}
|
treeNode={treeNode}
|
||||||
isModal={isModal || false}
|
isModal={isModal || false}
|
||||||
pluginContext={this.props.pluginContext}
|
|
||||||
treeChildren={this.props.treeChildren}
|
treeChildren={this.props.treeChildren}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -73,7 +71,6 @@ interface ITreeNodeChildrenState {
|
|||||||
class TreeNodeChildren extends PureComponent<{
|
class TreeNodeChildren extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
isModal?: boolean;
|
isModal?: boolean;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
treeChildren: TreeNode[] | null;
|
treeChildren: TreeNode[] | null;
|
||||||
}, ITreeNodeChildrenState> {
|
}, ITreeNodeChildrenState> {
|
||||||
state: ITreeNodeChildrenState = {
|
state: ITreeNodeChildrenState = {
|
||||||
@ -84,8 +81,8 @@ class TreeNodeChildren extends PureComponent<{
|
|||||||
};
|
};
|
||||||
offLocationChanged: IPublicTypeDisposable | undefined;
|
offLocationChanged: IPublicTypeDisposable | undefined;
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { treeNode, pluginContext } = this.props;
|
const { treeNode } = this.props;
|
||||||
const { project } = pluginContext;
|
const { project } = treeNode.pluginContext;
|
||||||
const { filterWorking, matchSelf, keywords } = treeNode.filterReult;
|
const { filterWorking, matchSelf, keywords } = treeNode.filterReult;
|
||||||
const { dropDetail } = treeNode;
|
const { dropDetail } = treeNode;
|
||||||
this.setState({
|
this.setState({
|
||||||
@ -122,13 +119,14 @@ class TreeNodeChildren extends PureComponent<{
|
|||||||
let groupContents: any[] = [];
|
let groupContents: any[] = [];
|
||||||
let currentGrp: IPublicModelExclusiveGroup;
|
let currentGrp: IPublicModelExclusiveGroup;
|
||||||
const { filterWorking, matchSelf, keywords } = this.state;
|
const { filterWorking, matchSelf, keywords } = this.state;
|
||||||
const Title = this.props.pluginContext.common.editorCabin.Title;
|
const Title = this.props.treeNode.pluginContext.common.editorCabin.Title;
|
||||||
|
|
||||||
const endGroup = () => {
|
const endGroup = () => {
|
||||||
if (groupContents.length > 0) {
|
if (groupContents.length > 0) {
|
||||||
children.push(
|
children.push(
|
||||||
<div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode?.id}>
|
<div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode?.id}>
|
||||||
<div className="condition-group-title">
|
<div className="condition-group-title">
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Title
|
<Title
|
||||||
title={currentGrp.title}
|
title={currentGrp.title}
|
||||||
match={filterWorking && matchSelf}
|
match={filterWorking && matchSelf}
|
||||||
@ -171,12 +169,12 @@ class TreeNodeChildren extends PureComponent<{
|
|||||||
children.push(insertion);
|
children.push(insertion);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
groupContents.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} pluginContext={this.props.pluginContext} />);
|
groupContents.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} />);
|
||||||
} else {
|
} else {
|
||||||
if (index === dropIndex) {
|
if (index === dropIndex) {
|
||||||
children.push(insertion);
|
children.push(insertion);
|
||||||
}
|
}
|
||||||
children.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} pluginContext={this.props.pluginContext} />);
|
children.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} />);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
endGroup();
|
endGroup();
|
||||||
@ -191,14 +189,13 @@ class TreeNodeChildren extends PureComponent<{
|
|||||||
|
|
||||||
class TreeNodeSlots extends PureComponent<{
|
class TreeNodeSlots extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
}> {
|
}> {
|
||||||
render() {
|
render() {
|
||||||
const { treeNode } = this.props;
|
const { treeNode } = this.props;
|
||||||
if (!treeNode.hasSlots()) {
|
if (!treeNode.hasSlots()) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const Title = this.props.pluginContext.common.editorCabin.Title;
|
const Title = this.props.treeNode.pluginContext.common.editorCabin.Title;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames('tree-node-slots', {
|
className={classNames('tree-node-slots', {
|
||||||
@ -207,10 +204,11 @@ class TreeNodeSlots extends PureComponent<{
|
|||||||
data-id={treeNode.id}
|
data-id={treeNode.id}
|
||||||
>
|
>
|
||||||
<div className="tree-node-slots-title">
|
<div className="tree-node-slots-title">
|
||||||
<Title title={{ type: 'i18n', intl: this.props.pluginContext.intlNode('Slots') }} />
|
{/* @ts-ignore */}
|
||||||
|
<Title title={{ type: 'i18n', intl: this.props.treeNode.pluginContext.intlNode('Slots') }} />
|
||||||
</div>
|
</div>
|
||||||
{treeNode.slots.map(tnode => (
|
{treeNode.slots.map(tnode => (
|
||||||
<TreeNodeView key={tnode.id} treeNode={tnode} pluginContext={this.props.pluginContext} />
|
<TreeNodeView key={tnode.id} treeNode={tnode} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -4,22 +4,24 @@ import TreeNode from '../controllers/tree-node';
|
|||||||
import TreeTitle from './tree-title';
|
import TreeTitle from './tree-title';
|
||||||
import TreeBranches from './tree-branches';
|
import TreeBranches from './tree-branches';
|
||||||
import { IconEyeClose } from '../icons/eye-close';
|
import { IconEyeClose } from '../icons/eye-close';
|
||||||
import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicTypeDisposable } from '@alilc/lowcode-types';
|
import { IPublicModelModalNodesManager, IPublicTypeDisposable } from '@alilc/lowcode-types';
|
||||||
|
import { IOutlinePanelPluginContext } from '../controllers/tree-master';
|
||||||
|
|
||||||
class ModalTreeNodeView extends PureComponent<{
|
class ModalTreeNodeView extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
}, {
|
}, {
|
||||||
treeChildren: TreeNode[] | null;
|
treeChildren: TreeNode[] | null;
|
||||||
}> {
|
}> {
|
||||||
private modalNodesManager: IPublicModelModalNodesManager | undefined | null;
|
private modalNodesManager: IPublicModelModalNodesManager | undefined | null;
|
||||||
readonly pluginContext: IPublicModelPluginContext;
|
readonly pluginContext: IOutlinePanelPluginContext;
|
||||||
|
|
||||||
constructor(props: any) {
|
constructor(props: {
|
||||||
|
treeNode: TreeNode;
|
||||||
|
}) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
// 模态管理对象
|
// 模态管理对象
|
||||||
this.pluginContext = props.pluginContext;
|
this.pluginContext = props.treeNode.pluginContext;
|
||||||
const { project } = this.pluginContext;
|
const { project } = this.pluginContext;
|
||||||
this.modalNodesManager = project.currentDocument?.modalNodesManager;
|
this.modalNodesManager = project.currentDocument?.modalNodesManager;
|
||||||
this.state = {
|
this.state = {
|
||||||
@ -72,7 +74,6 @@ class ModalTreeNodeView extends PureComponent<{
|
|||||||
treeChildren={this.state.treeChildren}
|
treeChildren={this.state.treeChildren}
|
||||||
expanded={expanded}
|
expanded={expanded}
|
||||||
isModal
|
isModal
|
||||||
pluginContext={this.pluginContext}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -83,7 +84,6 @@ class ModalTreeNodeView extends PureComponent<{
|
|||||||
export default class TreeNodeView extends PureComponent<{
|
export default class TreeNodeView extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
isModal?: boolean;
|
isModal?: boolean;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
isRootNode?: boolean;
|
isRootNode?: boolean;
|
||||||
}> {
|
}> {
|
||||||
state: {
|
state: {
|
||||||
@ -134,8 +134,8 @@ export default class TreeNodeView extends PureComponent<{
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { treeNode, pluginContext } = this.props;
|
const { treeNode } = this.props;
|
||||||
const { project } = pluginContext;
|
const { project } = treeNode.pluginContext;
|
||||||
|
|
||||||
const doc = project.currentDocument;
|
const doc = project.currentDocument;
|
||||||
|
|
||||||
@ -178,14 +178,14 @@ export default class TreeNodeView extends PureComponent<{
|
|||||||
}
|
}
|
||||||
|
|
||||||
shouldShowModalTreeNode(): boolean {
|
shouldShowModalTreeNode(): boolean {
|
||||||
const { treeNode, isRootNode, pluginContext } = this.props;
|
const { treeNode, isRootNode } = this.props;
|
||||||
if (!isRootNode) {
|
if (!isRootNode) {
|
||||||
// 只在 当前树 的根节点展示模态节点
|
// 只在 当前树 的根节点展示模态节点
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 当指定了新的根节点时,要从原始的根节点去获取模态节点
|
// 当指定了新的根节点时,要从原始的根节点去获取模态节点
|
||||||
const { project } = pluginContext;
|
const { project } = treeNode.pluginContext;
|
||||||
const rootNode = project.currentDocument?.root;
|
const rootNode = project.currentDocument?.root;
|
||||||
const rootTreeNode = treeNode.tree.getTreeNode(rootNode!);
|
const rootTreeNode = treeNode.tree.getTreeNode(rootNode!);
|
||||||
const modalNodes = rootTreeNode.children?.filter((item) => {
|
const modalNodes = rootTreeNode.children?.filter((item) => {
|
||||||
@ -234,19 +234,16 @@ export default class TreeNodeView extends PureComponent<{
|
|||||||
hidden={this.state.hidden}
|
hidden={this.state.hidden}
|
||||||
locked={this.state.locked}
|
locked={this.state.locked}
|
||||||
expandable={this.state.expandable}
|
expandable={this.state.expandable}
|
||||||
pluginContext={this.props.pluginContext}
|
|
||||||
/>
|
/>
|
||||||
{shouldShowModalTreeNode &&
|
{shouldShowModalTreeNode &&
|
||||||
<ModalTreeNodeView
|
<ModalTreeNodeView
|
||||||
treeNode={treeNode}
|
treeNode={treeNode}
|
||||||
pluginContext={this.props.pluginContext}
|
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
<TreeBranches
|
<TreeBranches
|
||||||
treeNode={treeNode}
|
treeNode={treeNode}
|
||||||
isModal={false}
|
isModal={false}
|
||||||
expanded={this.state.expanded}
|
expanded={this.state.expanded}
|
||||||
pluginContext={this.props.pluginContext}
|
|
||||||
treeChildren={this.state.treeChildren}
|
treeChildren={this.state.treeChildren}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { KeyboardEvent, FocusEvent, Fragment, PureComponent } from 'react';
|
import { KeyboardEvent, FocusEvent, Fragment, PureComponent } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { createIcon } from '@alilc/lowcode-utils';
|
import { createIcon } from '@alilc/lowcode-utils';
|
||||||
import { IPublicModelPluginContext, IPublicApiEvent } from '@alilc/lowcode-types';
|
import { IPublicApiEvent } from '@alilc/lowcode-types';
|
||||||
import TreeNode from '../controllers/tree-node';
|
import TreeNode from '../controllers/tree-node';
|
||||||
import { IconLock, IconUnlock, IconArrowRight, IconEyeClose, IconEye, IconCond, IconLoop, IconRadioActive, IconRadio, IconSetting } from '../icons';
|
import { IconLock, IconUnlock, IconArrowRight, IconEyeClose, IconEye, IconCond, IconLoop, IconRadioActive, IconRadio, IconSetting } from '../icons';
|
||||||
|
|
||||||
@ -23,7 +23,6 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
locked: boolean;
|
locked: boolean;
|
||||||
expandable: boolean;
|
expandable: boolean;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
}> {
|
}> {
|
||||||
state: {
|
state: {
|
||||||
editing: boolean;
|
editing: boolean;
|
||||||
@ -53,7 +52,7 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
const { treeNode } = this.props;
|
const { treeNode } = this.props;
|
||||||
const value = (e.target as HTMLInputElement).value || '';
|
const value = (e.target as HTMLInputElement).value || '';
|
||||||
treeNode.setTitleLabel(value);
|
treeNode.setTitleLabel(value);
|
||||||
emitOutlineEvent(this.props.pluginContext.event, 'rename', treeNode, { value });
|
emitOutlineEvent(this.props.treeNode.pluginContext.event, 'rename', treeNode, { value });
|
||||||
this.cancelEdit();
|
this.cancelEdit();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -90,7 +89,8 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { treeNode, isModal, pluginContext } = this.props;
|
const { treeNode, isModal } = this.props;
|
||||||
|
const { pluginContext } = treeNode;
|
||||||
const { editing } = this.state;
|
const { editing } = this.state;
|
||||||
const isCNode = !treeNode.isRoot();
|
const isCNode = !treeNode.isRoot();
|
||||||
const { node } = treeNode;
|
const { node } = treeNode;
|
||||||
@ -153,7 +153,7 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
<IconRadio className="tree-node-modal-radio" />
|
<IconRadio className="tree-node-modal-radio" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isCNode && <ExpandBtn expandable={this.props.expandable} expanded={this.props.expanded} treeNode={treeNode} pluginContext={this.props.pluginContext} />}
|
{isCNode && <ExpandBtn expandable={this.props.expandable} expanded={this.props.expanded} treeNode={treeNode} />}
|
||||||
<div className="tree-node-icon">{createIcon(treeNode.icon)}</div>
|
<div className="tree-node-icon">{createIcon(treeNode.icon)}</div>
|
||||||
<div className="tree-node-title-label">
|
<div className="tree-node-title-label">
|
||||||
{editing ? (
|
{editing ? (
|
||||||
@ -166,6 +166,7 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Title
|
<Title
|
||||||
title={this.state.title}
|
title={this.state.title}
|
||||||
match={filterWorking && matchSelf}
|
match={filterWorking && matchSelf}
|
||||||
@ -175,6 +176,7 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
{node.slotFor && (
|
{node.slotFor && (
|
||||||
<a className="tree-node-tag slot">
|
<a className="tree-node-tag slot">
|
||||||
{/* todo: click redirect to prop */}
|
{/* todo: click redirect to prop */}
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Tip>{intlNode('Slot for {prop}', { prop: node.slotFor.key })}</Tip>
|
<Tip>{intlNode('Slot for {prop}', { prop: node.slotFor.key })}</Tip>
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
@ -182,6 +184,7 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
<a className="tree-node-tag loop">
|
<a className="tree-node-tag loop">
|
||||||
{/* todo: click todo something */}
|
{/* todo: click todo something */}
|
||||||
<IconLoop />
|
<IconLoop />
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Tip>{intlNode('Loop')}</Tip>
|
<Tip>{intlNode('Loop')}</Tip>
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
@ -189,15 +192,16 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
<a className="tree-node-tag cond">
|
<a className="tree-node-tag cond">
|
||||||
{/* todo: click todo something */}
|
{/* todo: click todo something */}
|
||||||
<IconCond />
|
<IconCond />
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Tip>{intlNode('Conditional')}</Tip>
|
<Tip>{intlNode('Conditional')}</Tip>
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{shouldShowHideBtn && <HideBtn hidden={this.props.hidden} treeNode={treeNode} pluginContext={this.props.pluginContext} />}
|
{shouldShowHideBtn && <HideBtn hidden={this.props.hidden} treeNode={treeNode} />}
|
||||||
{shouldShowLockBtn && <LockBtn locked={this.props.locked} treeNode={treeNode} pluginContext={this.props.pluginContext} />}
|
{shouldShowLockBtn && <LockBtn locked={this.props.locked} treeNode={treeNode} />}
|
||||||
{shouldEditBtn && <RenameBtn treeNode={treeNode} pluginContext={this.props.pluginContext} onClick={this.enableEdit} /> }
|
{shouldEditBtn && <RenameBtn treeNode={treeNode} onClick={this.enableEdit} /> }
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -206,11 +210,10 @@ export default class TreeTitle extends PureComponent<{
|
|||||||
|
|
||||||
class RenameBtn extends PureComponent<{
|
class RenameBtn extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
onClick: (e: any) => void;
|
onClick: (e: any) => void;
|
||||||
}> {
|
}> {
|
||||||
render() {
|
render() {
|
||||||
const { intl, common } = this.props.pluginContext;
|
const { intl, common } = this.props.treeNode.pluginContext;
|
||||||
const Tip = common.editorCabin.Tip;
|
const Tip = common.editorCabin.Tip;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -218,6 +221,7 @@ class RenameBtn extends PureComponent<{
|
|||||||
onClick={this.props.onClick}
|
onClick={this.props.onClick}
|
||||||
>
|
>
|
||||||
<IconSetting />
|
<IconSetting />
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Tip>{intl('Rename')}</Tip>
|
<Tip>{intl('Rename')}</Tip>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -226,12 +230,11 @@ class RenameBtn extends PureComponent<{
|
|||||||
|
|
||||||
class LockBtn extends PureComponent<{
|
class LockBtn extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
locked: boolean;
|
locked: boolean;
|
||||||
}> {
|
}> {
|
||||||
render() {
|
render() {
|
||||||
const { treeNode, locked } = this.props;
|
const { treeNode, locked } = this.props;
|
||||||
const { intl, common } = this.props.pluginContext;
|
const { intl, common } = this.props.treeNode.pluginContext;
|
||||||
const Tip = common.editorCabin.Tip;
|
const Tip = common.editorCabin.Tip;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -242,6 +245,7 @@ class LockBtn extends PureComponent<{
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{locked ? <IconUnlock /> : <IconLock /> }
|
{locked ? <IconUnlock /> : <IconLock /> }
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Tip>{locked ? intl('Unlock') : intl('Lock')}</Tip>
|
<Tip>{locked ? intl('Unlock') : intl('Lock')}</Tip>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -251,24 +255,24 @@ class LockBtn extends PureComponent<{
|
|||||||
class HideBtn extends PureComponent<{
|
class HideBtn extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
}, {
|
}, {
|
||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
}> {
|
}> {
|
||||||
render() {
|
render() {
|
||||||
const { treeNode, hidden } = this.props;
|
const { treeNode, hidden } = this.props;
|
||||||
const { intl, common } = this.props.pluginContext;
|
const { intl, common } = treeNode.pluginContext;
|
||||||
const Tip = common.editorCabin.Tip;
|
const Tip = common.editorCabin.Tip;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="tree-node-hide-btn"
|
className="tree-node-hide-btn"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
emitOutlineEvent(this.props.pluginContext.event, hidden ? 'show' : 'hide', treeNode);
|
emitOutlineEvent(treeNode.pluginContext.event, hidden ? 'show' : 'hide', treeNode);
|
||||||
treeNode.setHidden(!hidden);
|
treeNode.setHidden(!hidden);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{hidden ? <IconEye /> : <IconEyeClose />}
|
{hidden ? <IconEye /> : <IconEyeClose />}
|
||||||
|
{/* @ts-ignore */}
|
||||||
<Tip>{hidden ? intl('Show') : intl('Hide')}</Tip>
|
<Tip>{hidden ? intl('Show') : intl('Hide')}</Tip>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -277,7 +281,6 @@ class HideBtn extends PureComponent<{
|
|||||||
|
|
||||||
class ExpandBtn extends PureComponent<{
|
class ExpandBtn extends PureComponent<{
|
||||||
treeNode: TreeNode;
|
treeNode: TreeNode;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
expanded: boolean;
|
expanded: boolean;
|
||||||
expandable: boolean;
|
expandable: boolean;
|
||||||
}> {
|
}> {
|
||||||
@ -294,7 +297,7 @@ class ExpandBtn extends PureComponent<{
|
|||||||
if (expanded) {
|
if (expanded) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
emitOutlineEvent(this.props.pluginContext.event, expanded ? 'collapse' : 'expand', treeNode);
|
emitOutlineEvent(treeNode.pluginContext.event, expanded ? 'collapse' : 'expand', treeNode);
|
||||||
treeNode.setExpanded(!expanded);
|
treeNode.setExpanded(!expanded);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { MouseEvent as ReactMouseEvent, PureComponent } from 'react';
|
|||||||
import { isFormEvent, canClickNode, isShaken } from '@alilc/lowcode-utils';
|
import { isFormEvent, canClickNode, isShaken } from '@alilc/lowcode-utils';
|
||||||
import { Tree } from '../controllers/tree';
|
import { Tree } from '../controllers/tree';
|
||||||
import TreeNodeView from './tree-node';
|
import TreeNodeView from './tree-node';
|
||||||
import { IPublicEnumDragObjectType, IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types';
|
import { IPublicEnumDragObjectType, IPublicModelNode } from '@alilc/lowcode-types';
|
||||||
import TreeNode from '../controllers/tree-node';
|
import TreeNode from '../controllers/tree-node';
|
||||||
|
|
||||||
function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string {
|
function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string {
|
||||||
@ -20,12 +20,21 @@ function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string
|
|||||||
|
|
||||||
export default class TreeView extends PureComponent<{
|
export default class TreeView extends PureComponent<{
|
||||||
tree: Tree;
|
tree: Tree;
|
||||||
pluginContext: IPublicModelPluginContext;
|
|
||||||
}> {
|
}> {
|
||||||
private shell: HTMLDivElement | null = null;
|
private shell: HTMLDivElement | null = null;
|
||||||
|
|
||||||
|
private ignoreUpSelected = false;
|
||||||
|
|
||||||
|
private boostEvent?: MouseEvent;
|
||||||
|
|
||||||
|
state: {
|
||||||
|
root: TreeNode | null;
|
||||||
|
} = {
|
||||||
|
root: null,
|
||||||
|
};
|
||||||
|
|
||||||
private hover(e: ReactMouseEvent) {
|
private hover(e: ReactMouseEvent) {
|
||||||
const { project } = this.props.pluginContext;
|
const { project } = this.props.tree.pluginContext;
|
||||||
const detecting = project.currentDocument?.detecting;
|
const detecting = project.currentDocument?.detecting;
|
||||||
if (detecting?.enable) {
|
if (detecting?.enable) {
|
||||||
return;
|
return;
|
||||||
@ -54,7 +63,7 @@ export default class TreeView extends PureComponent<{
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { project, event, canvas } = this.props.pluginContext;
|
const { project, event, canvas } = this.props.tree.pluginContext;
|
||||||
const doc = project.currentDocument;
|
const doc = project.currentDocument;
|
||||||
const selection = doc?.selection;
|
const selection = doc?.selection;
|
||||||
const focusNode = doc?.focusNode;
|
const focusNode = doc?.focusNode;
|
||||||
@ -109,10 +118,6 @@ export default class TreeView extends PureComponent<{
|
|||||||
return tree.getTreeNodeById(id);
|
return tree.getTreeNodeById(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
private ignoreUpSelected = false;
|
|
||||||
|
|
||||||
private boostEvent?: MouseEvent;
|
|
||||||
|
|
||||||
private onMouseDown = (e: ReactMouseEvent) => {
|
private onMouseDown = (e: ReactMouseEvent) => {
|
||||||
if (isFormEvent(e.nativeEvent)) {
|
if (isFormEvent(e.nativeEvent)) {
|
||||||
return;
|
return;
|
||||||
@ -127,7 +132,7 @@ export default class TreeView extends PureComponent<{
|
|||||||
if (!canClickNode(node, e)) {
|
if (!canClickNode(node, e)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { project, canvas } = this.props.pluginContext;
|
const { project, canvas } = this.props.tree.pluginContext;
|
||||||
const selection = project.currentDocument?.selection;
|
const selection = project.currentDocument?.selection;
|
||||||
const focusNode = project.currentDocument?.focusNode;
|
const focusNode = project.currentDocument?.focusNode;
|
||||||
|
|
||||||
@ -166,22 +171,16 @@ export default class TreeView extends PureComponent<{
|
|||||||
};
|
};
|
||||||
|
|
||||||
private onMouseLeave = () => {
|
private onMouseLeave = () => {
|
||||||
const { pluginContext } = this.props;
|
const { pluginContext } = this.props.tree;
|
||||||
const { project } = pluginContext;
|
const { project } = pluginContext;
|
||||||
const doc = project.currentDocument;
|
const doc = project.currentDocument;
|
||||||
doc?.detecting.leave();
|
doc?.detecting.leave();
|
||||||
};
|
};
|
||||||
|
|
||||||
state: {
|
|
||||||
root: TreeNode | null
|
|
||||||
} = {
|
|
||||||
root: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { tree, pluginContext } = this.props;
|
const { tree } = this.props;
|
||||||
const { root } = tree;
|
const { root } = tree;
|
||||||
const { project } = pluginContext;
|
const { project } = tree.pluginContext;
|
||||||
this.setState({ root });
|
this.setState({ root });
|
||||||
const doc = project.currentDocument;
|
const doc = project.currentDocument;
|
||||||
doc?.onFocusNodeChanged(() => {
|
doc?.onFocusNodeChanged(() => {
|
||||||
@ -208,7 +207,6 @@ export default class TreeView extends PureComponent<{
|
|||||||
<TreeNodeView
|
<TreeNodeView
|
||||||
key={this.state.root?.id}
|
key={this.state.root?.id}
|
||||||
treeNode={this.state.root}
|
treeNode={this.state.root}
|
||||||
pluginContext={this.props.pluginContext}
|
|
||||||
isRootNode
|
isRootNode
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
27
packages/shell/src/model/editor-view.ts
Normal file
27
packages/shell/src/model/editor-view.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { editorViewSymbol, pluginContextSymbol } from '../symbols';
|
||||||
|
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||||
|
import { IViewContext } from '@alilc/lowcode-workspace';
|
||||||
|
|
||||||
|
export class EditorView {
|
||||||
|
[editorViewSymbol]: IViewContext;
|
||||||
|
|
||||||
|
[pluginContextSymbol]: IPublicModelPluginContext;
|
||||||
|
|
||||||
|
constructor(editorView: IViewContext) {
|
||||||
|
this[editorViewSymbol] = editorView;
|
||||||
|
this[pluginContextSymbol] = this[editorViewSymbol].innerPlugins._getLowCodePluginContext({
|
||||||
|
pluginName: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toProxy() {
|
||||||
|
return new Proxy(this, {
|
||||||
|
get(target, prop, receiver) {
|
||||||
|
if ((target[pluginContextSymbol] as any)[prop as string]) {
|
||||||
|
return Reflect.get(target[pluginContextSymbol], prop, receiver);
|
||||||
|
}
|
||||||
|
return Reflect.get(target, prop, receiver);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -19,3 +19,4 @@ export * from './active-tracker';
|
|||||||
export * from './plugin-instance';
|
export * from './plugin-instance';
|
||||||
export * from './window';
|
export * from './window';
|
||||||
export * from './clipboard';
|
export * from './clipboard';
|
||||||
|
export * from './editor-view';
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import { windowSymbol } from '../symbols';
|
|||||||
import { IPublicModelResource, IPublicModelWindow, IPublicTypeDisposable } from '@alilc/lowcode-types';
|
import { IPublicModelResource, IPublicModelWindow, IPublicTypeDisposable } from '@alilc/lowcode-types';
|
||||||
import { IEditorWindow } from '@alilc/lowcode-workspace';
|
import { IEditorWindow } from '@alilc/lowcode-workspace';
|
||||||
import { Resource as ShellResource } from './resource';
|
import { Resource as ShellResource } from './resource';
|
||||||
|
import { EditorView } from './editor-view';
|
||||||
|
|
||||||
export class Window implements IPublicModelWindow {
|
export class Window implements IPublicModelWindow {
|
||||||
private readonly [windowSymbol]: IEditorWindow;
|
private readonly [windowSymbol]: IEditorWindow;
|
||||||
@ -42,7 +43,11 @@ export class Window implements IPublicModelWindow {
|
|||||||
return await this[windowSymbol].save();
|
return await this[windowSymbol].save();
|
||||||
}
|
}
|
||||||
|
|
||||||
get plugins() {
|
get currentEditorView() {
|
||||||
return this[windowSymbol].plugins;
|
return new EditorView(this[windowSymbol].editorView).toProxy() as any;
|
||||||
|
}
|
||||||
|
|
||||||
|
get editorViews() {
|
||||||
|
return Array.from(this[windowSymbol].editorViews.values()).map(d => new EditorView(d).toProxy() as any);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,3 +34,5 @@ export const resourceSymbol = Symbol('resource');
|
|||||||
export const clipboardSymbol = Symbol('clipboard');
|
export const clipboardSymbol = Symbol('clipboard');
|
||||||
export const configSymbol = Symbol('configSymbol');
|
export const configSymbol = Symbol('configSymbol');
|
||||||
export const conditionGroupSymbol = Symbol('conditionGroup');
|
export const conditionGroupSymbol = Symbol('conditionGroup');
|
||||||
|
export const editorViewSymbol = Symbol('editorView');
|
||||||
|
export const pluginContextSymbol = Symbol('pluginContext');
|
||||||
@ -3,3 +3,4 @@ export * from './transition-type';
|
|||||||
export * from './transform-stage';
|
export * from './transform-stage';
|
||||||
export * from './drag-object-type';
|
export * from './drag-object-type';
|
||||||
export * from './prop-value-changed-type';
|
export * from './prop-value-changed-type';
|
||||||
|
export * from './plugin-register-level';
|
||||||
6
packages/types/src/shell/enum/plugin-register-level.ts
Normal file
6
packages/types/src/shell/enum/plugin-register-level.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export enum IPublicEnumPluginRegisterLevel {
|
||||||
|
Default = 'default',
|
||||||
|
Workspace = 'workspace',
|
||||||
|
Resource = 'resource',
|
||||||
|
EditorView = 'editorView',
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
import { IPublicTypeDragNodeDataObject, IPublicTypeDragObject } from '../type';
|
import { IPublicTypeDisposable, IPublicTypeDragNodeDataObject, IPublicTypeDragObject } from '../type';
|
||||||
import { IPublicModelDragObject, IPublicModelLocateEvent, IPublicModelNode } from './';
|
import { IPublicModelDragObject, IPublicModelLocateEvent, IPublicModelNode } from './';
|
||||||
|
|
||||||
export interface IPublicModelDragon<
|
export interface IPublicModelDragon<
|
||||||
@ -19,7 +19,7 @@ export interface IPublicModelDragon<
|
|||||||
* @param func
|
* @param func
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
onDragstart(func: (e: LocateEvent) => any): () => void;
|
onDragstart(func: (e: LocateEvent) => any): IPublicTypeDisposable;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 绑定 drag 事件
|
* 绑定 drag 事件
|
||||||
@ -27,7 +27,7 @@ export interface IPublicModelDragon<
|
|||||||
* @param func
|
* @param func
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
onDrag(func: (e: LocateEvent) => any): () => void;
|
onDrag(func: (e: LocateEvent) => any): IPublicTypeDisposable;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 绑定 dragend 事件
|
* 绑定 dragend 事件
|
||||||
@ -35,7 +35,7 @@ export interface IPublicModelDragon<
|
|||||||
* @param func
|
* @param func
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
onDragend(func: (o: { dragObject: IPublicModelDragObject; copy?: boolean }) => any): () => void;
|
onDragend(func: (o: { dragObject: IPublicModelDragObject; copy?: boolean }) => any): IPublicTypeDisposable;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 设置拖拽监听的区域 shell,以及自定义拖拽转换函数 boost
|
* 设置拖拽监听的区域 shell,以及自定义拖拽转换函数 boost
|
||||||
|
|||||||
3
packages/types/src/shell/model/editor-view.ts
Normal file
3
packages/types/src/shell/model/editor-view.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { IPublicModelPluginContext } from './plugin-context';
|
||||||
|
|
||||||
|
export interface IPublicModelEditorView extends IPublicModelPluginContext {}
|
||||||
@ -30,3 +30,4 @@ export * from './sensor';
|
|||||||
export * from './resource';
|
export * from './resource';
|
||||||
export * from './clipboard';
|
export * from './clipboard';
|
||||||
export * from './setting-field';
|
export * from './setting-field';
|
||||||
|
export * from './editor-view';
|
||||||
|
|||||||
@ -12,18 +12,11 @@ import {
|
|||||||
IPublicApiPlugins,
|
IPublicApiPlugins,
|
||||||
IPublicApiWorkspace,
|
IPublicApiWorkspace,
|
||||||
} from '../api';
|
} from '../api';
|
||||||
|
import { IPublicEnumPluginRegisterLevel } from '../enum';
|
||||||
import { IPublicModelEngineConfig } from './';
|
import { IPublicModelEngineConfig } from './';
|
||||||
|
|
||||||
export interface IPublicModelPluginContext {
|
export interface IPublicModelPluginContext {
|
||||||
|
|
||||||
/**
|
|
||||||
* 对于插件开发者来说,可以在 context 挂载自定义的内容,作为插件内全局上下文使用
|
|
||||||
*
|
|
||||||
* for plugin developers, costom properties can be add to plugin context
|
|
||||||
* from inside plugin for convenience.
|
|
||||||
*/
|
|
||||||
[key: string]: any;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 可通过该对象读取插件初始化配置
|
* 可通过该对象读取插件初始化配置
|
||||||
* by using this, init options can be accessed from inside plugin
|
* by using this, init options can be accessed from inside plugin
|
||||||
@ -108,6 +101,12 @@ export interface IPublicModelPluginContext {
|
|||||||
* @tutorial https://lowcode-engine.cn/site/docs/api/workspace
|
* @tutorial https://lowcode-engine.cn/site/docs/api/workspace
|
||||||
*/
|
*/
|
||||||
get workspace(): IPublicApiWorkspace;
|
get workspace(): IPublicApiWorkspace;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 插件注册层级
|
||||||
|
* @since v1.1.7
|
||||||
|
*/
|
||||||
|
get registerLevel(): IPublicEnumPluginRegisterLevel;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { ReactElement } from 'react';
|
import { ReactElement } from 'react';
|
||||||
import { IPublicTypeDisposable, IPublicTypeNodeSchema } from '../type';
|
import { IPublicTypeDisposable, IPublicTypeNodeSchema } from '../type';
|
||||||
import { IPublicModelResource } from './resource';
|
import { IPublicModelResource } from './resource';
|
||||||
|
import { IPublicModelEditorView } from './editor-view';
|
||||||
|
|
||||||
export interface IPublicModelWindow<
|
export interface IPublicModelWindow<
|
||||||
Resource = IPublicModelResource
|
Resource = IPublicModelResource
|
||||||
@ -18,6 +19,18 @@ export interface IPublicModelWindow<
|
|||||||
/** 窗口资源类型 */
|
/** 窗口资源类型 */
|
||||||
resource?: Resource;
|
resource?: Resource;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 窗口当前视图
|
||||||
|
* @since v1.1.7
|
||||||
|
*/
|
||||||
|
currentEditorView: IPublicModelEditorView;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 窗口全部视图实例
|
||||||
|
* @since v1.1.7
|
||||||
|
*/
|
||||||
|
editorViews: IPublicModelEditorView[];
|
||||||
|
|
||||||
/** 当前窗口导入 schema */
|
/** 当前窗口导入 schema */
|
||||||
importSchema(schema: IPublicTypeNodeSchema): void;
|
importSchema(schema: IPublicTypeNodeSchema): void;
|
||||||
|
|
||||||
|
|||||||
@ -44,6 +44,7 @@ import {
|
|||||||
IPublicApiProject,
|
IPublicApiProject,
|
||||||
IPublicApiSetters,
|
IPublicApiSetters,
|
||||||
IPublicApiSkeleton,
|
IPublicApiSkeleton,
|
||||||
|
IPublicEnumPluginRegisterLevel,
|
||||||
IPublicModelPluginContext,
|
IPublicModelPluginContext,
|
||||||
IPublicTypePluginMeta,
|
IPublicTypePluginMeta,
|
||||||
} from '@alilc/lowcode-types';
|
} from '@alilc/lowcode-types';
|
||||||
@ -100,7 +101,7 @@ export class BasicContext implements IBasicContext {
|
|||||||
preference: IPluginPreferenceMananger;
|
preference: IPluginPreferenceMananger;
|
||||||
workspace: IWorkspace;
|
workspace: IWorkspace;
|
||||||
|
|
||||||
constructor(innerWorkspace: IWorkspace, viewName: string, public editorWindow?: IEditorWindow) {
|
constructor(innerWorkspace: IWorkspace, viewName: string, registerLevel: IPublicEnumPluginRegisterLevel, public editorWindow?: IEditorWindow) {
|
||||||
const editor = new Editor(viewName, true);
|
const editor = new Editor(viewName, true);
|
||||||
|
|
||||||
const innerSkeleton = new InnerSkeleton(editor, viewName);
|
const innerSkeleton = new InnerSkeleton(editor, viewName);
|
||||||
@ -168,6 +169,7 @@ export class BasicContext implements IBasicContext {
|
|||||||
if (editorWindow) {
|
if (editorWindow) {
|
||||||
context.editorWindow = new Window(editorWindow);
|
context.editorWindow = new Window(editorWindow);
|
||||||
}
|
}
|
||||||
|
context.registerLevel = registerLevel;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,16 @@
|
|||||||
import { computed, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
import { computed, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
||||||
import { IPublicEditorViewConfig, IPublicTypeEditorView } from '@alilc/lowcode-types';
|
import { IPublicEditorViewConfig, IPublicEnumPluginRegisterLevel, IPublicTypeEditorView } from '@alilc/lowcode-types';
|
||||||
import { flow } from 'mobx';
|
import { flow } from 'mobx';
|
||||||
import { IWorkspace } from '../workspace';
|
import { IWorkspace } from '../workspace';
|
||||||
import { BasicContext } from './base-context';
|
import { BasicContext, IBasicContext } from './base-context';
|
||||||
import { IEditorWindow } from '../window';
|
import { IEditorWindow } from '../window';
|
||||||
import { getWebviewPlugin } from '../inner-plugins/webview';
|
import { getWebviewPlugin } from '../inner-plugins/webview';
|
||||||
|
|
||||||
export class Context extends BasicContext {
|
export interface IViewContext extends IBasicContext {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Context extends BasicContext implements IViewContext {
|
||||||
viewName = 'editor-view';
|
viewName = 'editor-view';
|
||||||
|
|
||||||
instance: IPublicEditorViewConfig;
|
instance: IPublicEditorViewConfig;
|
||||||
@ -30,7 +34,7 @@ export class Context extends BasicContext {
|
|||||||
});
|
});
|
||||||
|
|
||||||
constructor(public workspace: IWorkspace, public editorWindow: IEditorWindow, public editorView: IPublicTypeEditorView, options: Object | undefined) {
|
constructor(public workspace: IWorkspace, public editorWindow: IEditorWindow, public editorView: IPublicTypeEditorView, options: Object | undefined) {
|
||||||
super(workspace, editorView.viewName, editorWindow);
|
super(workspace, editorView.viewName, IPublicEnumPluginRegisterLevel.EditorView, editorWindow);
|
||||||
this.viewType = editorView.viewType || 'editor';
|
this.viewType = editorView.viewType || 'editor';
|
||||||
this.viewName = editorView.viewName;
|
this.viewName = editorView.viewName;
|
||||||
this.instance = editorView(this.innerPlugins._getLowCodePluginContext({
|
this.instance = editorView(this.innerPlugins._getLowCodePluginContext({
|
||||||
|
|||||||
@ -4,3 +4,4 @@ export * from './window';
|
|||||||
export * from './layouts/workbench';
|
export * from './layouts/workbench';
|
||||||
export { Resource } from './resource';
|
export { Resource } from './resource';
|
||||||
export type { IResource } from './resource';
|
export type { IResource } from './resource';
|
||||||
|
export type { IViewContext } from './context/view-context';
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { ISkeleton } from '@alilc/lowcode-editor-skeleton';
|
import { ISkeleton } from '@alilc/lowcode-editor-skeleton';
|
||||||
import { IPublicTypeEditorView, IPublicResourceData, IPublicResourceTypeConfig, IBaseModelResource } from '@alilc/lowcode-types';
|
import { IPublicTypeEditorView, IPublicResourceData, IPublicResourceTypeConfig, IBaseModelResource, IPublicEnumPluginRegisterLevel } from '@alilc/lowcode-types';
|
||||||
import { Logger } from '@alilc/lowcode-utils';
|
import { Logger } from '@alilc/lowcode-utils';
|
||||||
import { BasicContext, IBasicContext } from './context/base-context';
|
import { BasicContext, IBasicContext } from './context/base-context';
|
||||||
import { ResourceType, IResourceType } from './resource-type';
|
import { ResourceType, IResourceType } from './resource-type';
|
||||||
@ -75,7 +75,7 @@ export class Resource implements IResource {
|
|||||||
}
|
}
|
||||||
|
|
||||||
constructor(readonly resourceData: IPublicResourceData, readonly resourceType: IResourceType, readonly workspace: IWorkspace) {
|
constructor(readonly resourceData: IPublicResourceData, readonly resourceType: IResourceType, readonly workspace: IWorkspace) {
|
||||||
this.context = new BasicContext(workspace, `resource-${resourceData.resourceName || resourceType.name}`);
|
this.context = new BasicContext(workspace, `resource-${resourceData.resourceName || resourceType.name}`, IPublicEnumPluginRegisterLevel.Resource);
|
||||||
this.resourceTypeInstance = resourceType.resourceTypeModel(this.context.innerPlugins._getLowCodePluginContext({
|
this.resourceTypeInstance = resourceType.resourceTypeModel(this.context.innerPlugins._getLowCodePluginContext({
|
||||||
pluginName: '',
|
pluginName: '',
|
||||||
}), this.options);
|
}), this.options);
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { uniqueId } from '@alilc/lowcode-utils';
|
import { uniqueId } from '@alilc/lowcode-utils';
|
||||||
import { createModuleEventBus, IEventBus, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
import { createModuleEventBus, IEventBus, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
||||||
import { Context } from './context/view-context';
|
import { Context, IViewContext } from './context/view-context';
|
||||||
import { IWorkspace } from './workspace';
|
import { IWorkspace } from './workspace';
|
||||||
import { IResource } from './resource';
|
import { IResource } from './resource';
|
||||||
import { IPublicTypeDisposable } from '../../types/es/shell/type/disposable';
|
import { IPublicTypeDisposable } from '../../types/es/shell/type/disposable';
|
||||||
@ -13,10 +13,12 @@ interface IWindowCOnfig {
|
|||||||
sleep?: boolean;
|
sleep?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IEditorWindow extends Omit<IPublicModelWindow<IResource>, 'changeViewType'> {
|
export interface IEditorWindow extends Omit<IPublicModelWindow<IResource>, 'changeViewType' | 'currentEditorView' | 'editorViews'> {
|
||||||
readonly resource: IResource;
|
readonly resource: IResource;
|
||||||
|
|
||||||
editorViews: Map<string, Context>;
|
editorViews: Map<string, IViewContext>;
|
||||||
|
|
||||||
|
editorView: IViewContext;
|
||||||
|
|
||||||
changeViewType: (name: string, ignoreEmit?: boolean) => void;
|
changeViewType: (name: string, ignoreEmit?: boolean) => void;
|
||||||
|
|
||||||
@ -71,6 +73,9 @@ export class EditorWindow implements IEditorWindow {
|
|||||||
async save() {
|
async save() {
|
||||||
const value: any = {};
|
const value: any = {};
|
||||||
const editorViews = this.resource.editorViews;
|
const editorViews = this.resource.editorViews;
|
||||||
|
if (!editorViews) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
for (let i = 0; i < editorViews.length; i++) {
|
for (let i = 0; i < editorViews.length; i++) {
|
||||||
const name = editorViews[i].viewName;
|
const name = editorViews[i].viewName;
|
||||||
const saveResult = await this.editorViews.get(name)?.save();
|
const saveResult = await this.editorViews.get(name)?.save();
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { IDesigner, ILowCodePluginManager, LowCodePluginManager } from '@alilc/lowcode-designer';
|
import { IDesigner, ILowCodePluginManager, LowCodePluginManager } from '@alilc/lowcode-designer';
|
||||||
import { createModuleEventBus, Editor, IEditor, IEventBus, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
import { createModuleEventBus, Editor, IEditor, IEventBus, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
||||||
import { IPublicApiPlugins, IPublicApiWorkspace, IPublicResourceList, IPublicTypeDisposable, IPublicTypeResourceType, IShellModelFactory } from '@alilc/lowcode-types';
|
import { IPublicApiPlugins, IPublicApiWorkspace, IPublicEnumPluginRegisterLevel, IPublicResourceList, IPublicTypeDisposable, IPublicTypeResourceType, IShellModelFactory } from '@alilc/lowcode-types';
|
||||||
import { BasicContext } from './context/base-context';
|
import { BasicContext } from './context/base-context';
|
||||||
import { EditorWindow } from './window';
|
import { EditorWindow } from './window';
|
||||||
import type { IEditorWindow } from './window';
|
import type { IEditorWindow } from './window';
|
||||||
@ -94,7 +94,7 @@ export class Workspace implements IWorkspace {
|
|||||||
readonly registryInnerPlugin: (designer: IDesigner, editor: IEditor, plugins: IPublicApiPlugins) => Promise<IPublicTypeDisposable>,
|
readonly registryInnerPlugin: (designer: IDesigner, editor: IEditor, plugins: IPublicApiPlugins) => Promise<IPublicTypeDisposable>,
|
||||||
readonly shellModelFactory: any,
|
readonly shellModelFactory: any,
|
||||||
) {
|
) {
|
||||||
this.context = new BasicContext(this, '');
|
this.context = new BasicContext(this, '', IPublicEnumPluginRegisterLevel.Workspace);
|
||||||
makeObservable(this);
|
makeObservable(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user