diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index 22989a1f6..d5fb16291 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -125,7 +125,103 @@ export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { symbols, classes, }; -config.set('isOpenSource', isOpenSource); +engineConfig.set('isOpenSource', isOpenSource); + +// 注册一批内置插件 +(async function registerPlugins() { + // 处理 editor.set('assets'),将组件元数据创建好 + const componentMetaParser = (ctx: ILowCodePluginContext) => { + return { + init() { + editor.onGot('assets', (assets: any) => { + const { components = [] } = assets; + designer.buildComponentMetasMap(components); + }); + }, + }; + }; + componentMetaParser.pluginName = '___component_meta_parser___'; + await plugins.register(componentMetaParser); + + // 注册默认的 setters + const setterRegistry = (ctx: ILowCodePluginContext) => { + return { + init() { + if (engineConfig.get('disableDefaultSetters')) return; + const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters; + if (builtinSetters) { + ctx.setters.registerSetter(builtinSetters); + } + }, + }; + }; + setterRegistry.pluginName = '___setter_registry___'; + await plugins.register(setterRegistry); + + // 注册默认的面板 + const defaultPanelRegistry = (ctx: ILowCodePluginContext) => { + return { + init() { + skeleton.add({ + area: 'mainArea', + name: 'designer', + type: 'Widget', + content: DesignerPlugin, + }); + if (!engineConfig.get('disableDefaultSettingPanel')) { + skeleton.add({ + area: 'rightArea', + name: 'settingsPane', + type: 'Panel', + content: SettingsPrimaryPane, + props: { + ignoreRoot: true, + }, + }); + } + + // by default in float area; + let isInFloatArea = true; + const hasPreferenceForOutline = editor + ?.getPreference() + ?.contains('outline-pane-pinned-status-isFloat', 'skeleton'); + if (hasPreferenceForOutline) { + isInFloatArea = editor + ?.getPreference() + ?.get('outline-pane-pinned-status-isFloat', 'skeleton'); + } + + skeleton.add({ + area: 'leftArea', + name: 'outlinePane', + type: 'PanelDock', + content: Outline, + panelProps: { + area: isInFloatArea ? 'leftFloatArea' : 'leftFixedArea', + keepVisibleWhileDragging: true, + ...engineConfig.get('defaultOutlinePaneProps'), + }, + contentProps: { + treeTitleExtra: engineConfig.get('treeTitleExtra'), + }, + }); + skeleton.add({ + area: 'rightArea', + name: 'backupOutline', + type: 'Panel', + props: { + condition: () => { + return designer.dragon.dragging && !getTreeMaster(designer).hasVisibleTreeBoard(); + }, + }, + content: OutlineBackupPane, + }); + }, + }; + }; + defaultPanelRegistry.pluginName = '___default_panel___'; + await plugins.register(defaultPanelRegistry); +})(); // container which will host LowCodeEngine DOM let engineContainer: HTMLElement; diff --git a/packages/plugin-outline-pane/src/helper/tree-title-extra.ts b/packages/plugin-outline-pane/src/helper/tree-title-extra.ts new file mode 100644 index 000000000..b1bcbf6ed --- /dev/null +++ b/packages/plugin-outline-pane/src/helper/tree-title-extra.ts @@ -0,0 +1,20 @@ +import { globalContext } from '@alilc/lowcode-editor-core'; +import { ReactElement } from 'react'; + +const TREE_TITLE_EXTRA_KEY = 'TREE_TITLE_EXTRA_KEY'; + +export const registerTreeTitleExtra = (extra: ReactElement) => { + if (extra && !globalContext.has(TREE_TITLE_EXTRA_KEY)) { + globalContext.register(extra, TREE_TITLE_EXTRA_KEY); + } +}; + +export const getTreeTitleExtra = () => { + try { + return globalContext.get(TREE_TITLE_EXTRA_KEY); + } catch (e) { + // console.error('getTreeTitleExtra Error', e); + } + + return null; +}; diff --git a/packages/plugin-outline-pane/src/views/pane.tsx b/packages/plugin-outline-pane/src/views/pane.tsx index 7c9ef8a06..837245b89 100644 --- a/packages/plugin-outline-pane/src/views/pane.tsx +++ b/packages/plugin-outline-pane/src/views/pane.tsx @@ -6,6 +6,7 @@ import TreeView from './tree'; import './style.less'; import { IEditor } from '@alilc/lowcode-types'; import Filter from './filter'; +import { registerTreeTitleExtra } from '../helper/tree-title-extra'; interface Props { config: any; editor: IEditor } @observer @@ -21,6 +22,10 @@ export class OutlinePane extends Component { this.main.purge(); } + componentDidMount() { + registerTreeTitleExtra(this.props?.config?.contentProps?.treeTitleExtra); + } + render() { const tree = this.main.currentTree; diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx index a4802f8f7..455f9622a 100644 --- a/packages/plugin-outline-pane/src/views/tree-title.tsx +++ b/packages/plugin-outline-pane/src/views/tree-title.tsx @@ -13,6 +13,7 @@ import { IconLoop } from '../icons/loop'; import { IconRadioActive } from '../icons/radio-active'; import { IconRadio } from '../icons/radio'; import { IconLock, IconUnlock } from '../icons'; +import { getTreeTitleExtra } from '../helper/tree-title-extra'; function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record) { @@ -98,6 +99,7 @@ export default class TreeTitle extends Component<{ }; } const { filterWorking, matchSelf, keywords } = treeNode.filterReult; + const Extra = getTreeTitleExtra(); return (
+ {Extra && } {node.slotFor && ( {/* todo: click redirect to prop */}