From b664663890fd9fa5e41ac4998e38e85a4a3f2a03 Mon Sep 17 00:00:00 2001 From: JackLian Date: Mon, 28 Nov 2022 15:57:48 +0800 Subject: [PATCH] refactor: move common to shell --- packages/engine/src/engine-core.ts | 34 ++-- packages/engine/src/modules/designer-cabin.ts | 50 ----- packages/engine/src/modules/editor-cabin.ts | 15 -- .../engine/src/modules/skeleton-cabin.tsx | 16 -- packages/engine/src/modules/utils.ts | 17 -- packages/shell/src/common.tsx | 183 ++++++++++++++++++ packages/shell/src/index.ts | 5 +- 7 files changed, 201 insertions(+), 119 deletions(-) delete mode 100644 packages/engine/src/modules/designer-cabin.ts delete mode 100644 packages/engine/src/modules/editor-cabin.ts delete mode 100644 packages/engine/src/modules/skeleton-cabin.tsx delete mode 100644 packages/engine/src/modules/utils.ts create mode 100644 packages/shell/src/common.tsx diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index aad924324..7045816e5 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -6,7 +6,6 @@ import { LowCodePluginManager, ILowCodePluginContext, PluginPreference, - TransformStage, } from '@alilc/lowcode-designer'; import { Skeleton as InnerSkeleton, @@ -16,15 +15,21 @@ import { import Outline, { OutlineBackupPane, getTreeMaster } from '@alilc/lowcode-plugin-outline-pane'; import DesignerPlugin from '@alilc/lowcode-plugin-designer'; -import { Hotkey, Project, Skeleton, Setters, Material, Event, DocumentModel } from '@alilc/lowcode-shell'; +import { + Hotkey, + Project, + Skeleton, + Setters, + Material, + Event, + DocumentModel, + Common, +} from '@alilc/lowcode-shell'; import { getLogger, isPlainObject } from '@alilc/lowcode-utils'; import './modules/live-editing'; -import utils from './modules/utils'; -import * as editorCabin from './modules/editor-cabin'; -import getSkeletonCabin from './modules/skeleton-cabin'; -import getDesignerCabin from './modules/designer-cabin'; import classes from './modules/classes'; import symbols from './modules/symbols'; + export * from './modules/editor-types'; export * from './modules/skeleton-types'; export * from './modules/designer-types'; @@ -46,8 +51,6 @@ const plugins = new LowCodePluginManager(editor).toProxy(); editor.set('plugins' as any, plugins); const { project: innerProject } = designer; -const skeletonCabin = getSkeletonCabin(innerSkeleton); -const { Workbench } = skeletonCabin; const hotkey = new Hotkey(); const project = new Project(innerProject); @@ -57,17 +60,7 @@ const material = new Material(editor); const config = engineConfig; const event = new Event(editor, { prefix: 'common' }); const logger = getLogger({ level: 'warn', bizName: 'common' }); -const designerCabin = getDesignerCabin(editor); -const objects = { - TransformStage, -}; -const common = { - utils, - objects, - editorCabin, - designerCabin, - skeletonCabin, -}; +const common = new Common(editor, innerSkeleton); export { skeleton, @@ -189,6 +182,7 @@ let engineContainer: HTMLElement; // @ts-ignore webpack Define variable export const version = VERSION_PLACEHOLDER; engineConfig.set('ENGINE_VERSION', version); + export async function init( container?: HTMLElement, options?: EngineOptions, @@ -213,6 +207,8 @@ export async function init( engineConfig.setEngineOptions(engineOptions as any); await plugins.init(pluginPreference as any); + + const { Workbench } = common.skeletonCabin; render( createElement(Workbench, { skeleton: innerSkeleton, diff --git a/packages/engine/src/modules/designer-cabin.ts b/packages/engine/src/modules/designer-cabin.ts deleted file mode 100644 index 0ba28c701..000000000 --- a/packages/engine/src/modules/designer-cabin.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { - SettingField, - isSettingField, - Designer, - TransformStage, - LiveEditing, - isDragNodeDataObject, - isDragNodeObject, - isDragAnyObject, - DragObjectType, - isNode, - isShaken, - contains, - LocationDetailType, - isLocationChildrenDetail, - ScrollTarget, -} from '@alilc/lowcode-designer'; -import { Editor } from '@alilc/lowcode-editor-core'; -import { designerCabinSymbol, Dragon } from '@alilc/lowcode-shell'; - -export default function getDesignerCabin(editor: Editor) { - const designer = editor.get('designer') as Designer; - - return { - SettingField, - isSettingField, - dragon: Dragon.create(designer.dragon), - TransformStage, - LiveEditing, - DragObjectType, - isDragNodeDataObject, - isNode, - [designerCabinSymbol]: { - isDragNodeObject, - isDragAnyObject, - isShaken, - contains, - LocationDetailType, - isLocationChildrenDetail, - ScrollTarget, - isSettingField, - TransformStage, - SettingField, - LiveEditing, - DragObjectType, - isDragNodeDataObject, - isNode, - }, - }; -} \ No newline at end of file diff --git a/packages/engine/src/modules/editor-cabin.ts b/packages/engine/src/modules/editor-cabin.ts deleted file mode 100644 index 3f2874a10..000000000 --- a/packages/engine/src/modules/editor-cabin.ts +++ /dev/null @@ -1,15 +0,0 @@ -export { - Title, - Tip, - shallowIntl, - createIntl, - intl, - createSetterContent, - obx, - observable, - makeObservable, - untracked, - computed, - observer, - globalLocale, -} from '@alilc/lowcode-editor-core'; \ No newline at end of file diff --git a/packages/engine/src/modules/skeleton-cabin.tsx b/packages/engine/src/modules/skeleton-cabin.tsx deleted file mode 100644 index 1d8363ab1..000000000 --- a/packages/engine/src/modules/skeleton-cabin.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { - Skeleton as InnerSkeleton, - createSettingFieldView, - PopupContext, - PopupPipe, - Workbench as InnerWorkbench, -} from '@alilc/lowcode-editor-skeleton'; - -export default function getSkeletonCabin(skeleton: InnerSkeleton) { - return { - createSettingFieldView, - PopupContext, - PopupPipe, - Workbench: (props: any) => , // hijack skeleton - }; -} \ No newline at end of file diff --git a/packages/engine/src/modules/utils.ts b/packages/engine/src/modules/utils.ts deleted file mode 100644 index 5283eb4f5..000000000 --- a/packages/engine/src/modules/utils.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById, transactionManager } from '@alilc/lowcode-utils'; -import { isNodeSchema } from '@alilc/lowcode-types'; -import { getConvertedExtraKey, getOriginalExtraKey } from '@alilc/lowcode-designer'; -import { createIntl } from '@alilc/lowcode-editor-core'; - -const utils = { - isNodeSchema, - isFormEvent, - compatibleLegaoSchema, - getNodeSchemaById, - getConvertedExtraKey, - getOriginalExtraKey, - executeTransaction: transactionManager.executeTransaction.bind(transactionManager), - createIntl, -}; - -export default utils; \ No newline at end of file diff --git a/packages/shell/src/common.tsx b/packages/shell/src/common.tsx new file mode 100644 index 000000000..d6511edef --- /dev/null +++ b/packages/shell/src/common.tsx @@ -0,0 +1,183 @@ +import { editorSymbol, skeletonSymbol, designerCabinSymbol } from './symbols'; +import { + isFormEvent as innerIsFormEvent, + compatibleLegaoSchema as innerCompatibleLegaoSchema, + getNodeSchemaById as innerGetNodeSchemaById, + transactionManager, +} from '@alilc/lowcode-utils'; +import { + isNodeSchema as innerIsNodeSchema, + NodeSchema, + TransitionType, +} from '@alilc/lowcode-types'; +import { + SettingField, + isSettingField, + Designer, + TransformStage, + LiveEditing, + isDragNodeDataObject, + isDragNodeObject, + isDragAnyObject, + DragObjectType, + isNode, + isShaken, + contains, + LocationDetailType, + isLocationChildrenDetail, + ScrollTarget, + getConvertedExtraKey as innerGetConvertedExtraKey, + getOriginalExtraKey as innerGetOriginalExtraKey, +} from '@alilc/lowcode-designer'; +import { + Skeleton as InnerSkeleton, + createSettingFieldView, + PopupContext, + PopupPipe, + Workbench as InnerWorkbench, +} from '@alilc/lowcode-editor-skeleton'; +import Dragon from './dragon'; +import { + Editor, + Title as InnerTitle, + Tip as InnerTip, + shallowIntl, + createIntl as innerCreateIntl, + intl, + createSetterContent, + obx, + observable, + makeObservable, + untracked, + computed, + observer, + globalLocale, +} from '@alilc/lowcode-editor-core'; +import { ReactNode } from 'react'; + + +const getDesignerCabin = (editor: Editor) => { + const designer = editor.get('designer') as Designer; + + return { + SettingField, + isSettingField, + dragon: Dragon.create(designer.dragon), + TransformStage, + LiveEditing, + DragObjectType, + isDragNodeDataObject, + isNode, + [designerCabinSymbol]: { + isDragNodeObject, + isDragAnyObject, + isShaken, + contains, + LocationDetailType, + isLocationChildrenDetail, + ScrollTarget, + isSettingField, + TransformStage, + SettingField, + LiveEditing, + DragObjectType, + isDragNodeDataObject, + isNode, + }, + }; +}; + +const getSkeletonCabin = (skeleton: InnerSkeleton) => { + return { + createSettingFieldView, + PopupContext, + PopupPipe, + Workbench: (props: any) => , // hijack skeleton + }; +}; + +class Utils { + isNodeSchema(data: any): data is NodeSchema { + return innerIsNodeSchema(data); + } + + isFormEvent(e: KeyboardEvent | MouseEvent): boolean { + return innerIsFormEvent(e); + } + + compatibleLegaoSchema(props: any): any { + return innerCompatibleLegaoSchema(props); + } + + getNodeSchemaById(schema: NodeSchema, nodeId: string): NodeSchema | undefined { + return innerGetNodeSchemaById(schema, nodeId); + } + + getConvertedExtraKey(key: string): string { + return innerGetConvertedExtraKey(key); + } + + getOriginalExtraKey(key: string): string { + return innerGetOriginalExtraKey(key); + } + + executeTransaction(fn: () => void, type: TransitionType = TransitionType.REPAINT): void { + transactionManager.executeTransaction(fn, type); + } + + createIntl(instance: string | object): { + intlNode(id: string, params?: object): ReactNode; + intl(id: string, params?: object): string; + getLocale(): string; + setLocale(locale: string): void; + } { + return innerCreateIntl(instance); + } +} + +export default class Common { + private readonly [editorSymbol]: Editor; + private readonly [skeletonSymbol]: InnerSkeleton; + private readonly __designerCabin: any; + private readonly __skeletonCabin: any; + private readonly __editorCabin: any; + private readonly __utils: Utils; + + constructor(editor: Editor, skeleton: InnerSkeleton) { + this[editorSymbol] = editor; + this[skeletonSymbol] = skeleton; + this.__designerCabin = getDesignerCabin(this[editorSymbol]); + this.__skeletonCabin = getSkeletonCabin(this[skeletonSymbol]); + this.__utils = new Utils(); + } + + get utils(): any { + return this.__utils; + } + + get editorCabin(): any { + return { + Title: InnerTitle, + Tip: InnerTip, + shallowIntl, + createIntl: innerCreateIntl, + intl, + createSetterContent, + obx, + observable, + makeObservable, + untracked, + computed, + observer, + globalLocale, + }; + } + + get designerCabin(): any { + return this.__designerCabin; + } + + get skeletonCabin(): any { + return this.__skeletonCabin; + } +} \ No newline at end of file diff --git a/packages/shell/src/index.ts b/packages/shell/src/index.ts index 07a0c83a7..8b6096e9b 100644 --- a/packages/shell/src/index.ts +++ b/packages/shell/src/index.ts @@ -1,5 +1,4 @@ import Detecting from './detecting'; -// import Dragon from './dragon'; import DocumentModel from './document-model'; import Event, { getEvent } from './event'; import History from './history'; @@ -15,6 +14,8 @@ import Skeleton from './skeleton'; import Dragon from './dragon'; import SettingPropEntry from './setting-prop-entry'; import SettingTopEntry from './setting-top-entry'; +import Common from './common'; + export * from './symbols'; /** @@ -27,7 +28,6 @@ export * from './symbols'; export { DocumentModel, Detecting, - // Dragon, Event, History, Material, @@ -42,5 +42,6 @@ export { SettingPropEntry, SettingTopEntry, Dragon, + Common, getEvent, }; \ No newline at end of file