From 6ae7c1bee5630cd5b48abaeba3b4b89d95960db8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E7=86=A0?= Date: Thu, 8 Dec 2022 11:41:13 +0800 Subject: [PATCH] refactor: remove dependency of shell from designer (#1328) --- packages/designer/jest.config.js | 3 +- packages/designer/package.json | 8 ++-- packages/designer/src/designer/designer.ts | 44 +++---------------- packages/designer/src/designer/dragon.ts | 7 ++- .../designer/setting/setting-prop-entry.ts | 3 +- packages/designer/src/document/history.ts | 5 --- packages/designer/src/document/node/node.ts | 6 +-- .../designer/src/plugin/plugin-context.ts | 30 ++++++------- packages/designer/src/plugin/plugin-types.ts | 40 ++++++++++------- .../tests/bugs/prop-variable-jse.test.ts | 4 +- .../bem-tools/drag-resize-engine.test.ts | 9 +--- .../bem-tools/manager.test.tsx | 17 +------ .../builtin-simulator/host-view.test.tsx | 32 -------------- .../tests/builtin-simulator/host.test.ts | 4 +- .../tests/builtin-simulator/viewport.test.ts | 6 +-- .../tests/designer/builtin-hotkey.test.ts | 3 +- .../designer/tests/designer/designer.test.ts | 29 +++++++----- .../designer/tests/designer/dragon.test.ts | 4 +- .../designer/tests/designer/scroller.test.ts | 3 +- .../designer/setting/setting-field.test.ts | 4 +- .../setting/setting-prop-entry.test.ts | 9 +--- .../setting/setting-top-entry.test.ts | 9 +--- .../document-model/document-model.test.ts | 6 +-- .../tests/document/history/history.test.ts | 14 ------ .../document/node/modal-nodes-manager.test.ts | 3 +- .../tests/document/node/node-children.test.ts | 3 +- .../designer/tests/document/node/node.test.ts | 8 ++-- .../tests/document/node/props/prop.test.ts | 5 +-- .../tests/project/project-methods.test.ts | 7 +-- packages/designer/tsconfig.json | 12 +++++ packages/engine/src/engine-core.ts | 3 +- .../engine/src/modules/shell-model-factory.ts | 18 ++++++++ packages/types/src/index.ts | 1 + packages/types/src/shell-model-factory.ts | 8 ++++ packages/types/src/shell/index.ts | 6 ++- 35 files changed, 159 insertions(+), 214 deletions(-) delete mode 100644 packages/designer/tests/builtin-simulator/host-view.test.tsx create mode 100644 packages/designer/tsconfig.json create mode 100644 packages/engine/src/modules/shell-model-factory.ts create mode 100644 packages/types/src/shell-model-factory.ts diff --git a/packages/designer/jest.config.js b/packages/designer/jest.config.js index f77cf4c9f..6866d24a0 100644 --- a/packages/designer/jest.config.js +++ b/packages/designer/jest.config.js @@ -12,7 +12,8 @@ const jestConfig = { // testMatch: ['**/node-children.test.ts'], // testMatch: ['**/plugin-manager.test.ts'], // testMatch: ['**/history/history.test.ts'], - // testMatch: ['**/host-view.test.tsx'], + // testMatch: ['**/document-model.test.ts'], + // testMatch: ['**/prop.test.ts'], // testMatch: ['(/tests?/.*(test))\\.[jt]s$'], transformIgnorePatterns: [ `/node_modules/(?!${esModules})/`, diff --git a/packages/designer/package.json b/packages/designer/package.json index 830d2fa04..86e79cf51 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -16,12 +16,9 @@ "license": "MIT", "dependencies": { "@alilc/lowcode-editor-core": "1.0.17", - "@alilc/lowcode-shell": "1.0.17", "@alilc/lowcode-types": "1.0.17", "@alilc/lowcode-utils": "1.0.17", "classnames": "^2.2.6", - "enzyme": "^3.11.0", - "enzyme-adapter-react-16": "^1.15.5", "react": "^16", "react-dom": "^16.7.0", "ric-shim": "^1.0.1", @@ -30,6 +27,7 @@ }, "devDependencies": { "@alib/build-scripts": "^0.1.29", + "@alilc/lowcode-shell": "1.0.17", "@alilc/lowcode-test-mate": "^1.0.1", "@testing-library/react": "^11.2.2", "@types/classnames": "^2.2.7", @@ -43,6 +41,10 @@ "babel-jest": "^26.5.2", "build-plugin-component": "^0.2.10", "build-scripts-config": "^0.1.8", + "enzyme": "^3.11.0", + "@types/enzyme": "^3.10.12", + "enzyme-adapter-react-16": "^1.15.5", + "@types/enzyme-adapter-react-16": "^1.0.6", "jest": "^26.6.3", "lodash": "^4.17.20", "moment": "^2.29.1", diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index dcb361fa2..7dbc3cbfd 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -10,6 +10,7 @@ import { PropsList, NodeSchema, PropsTransducer, + IShellModelFactory, } from '@alilc/lowcode-types'; import { megreAssets, AssetsJson, isNodeSchema } from '@alilc/lowcode-utils'; import { Project } from '../project'; @@ -28,6 +29,7 @@ import { BemToolsManager } from '../builtin-simulator/bem-tools/manager'; export interface DesignerProps { editor: IEditor; + shellModelFactory: IShellModelFactory; className?: string; style?: object; defaultSchema?: ProjectSchema; @@ -58,6 +60,8 @@ export class Designer { readonly bemToolsManager = new BemToolsManager(this); + readonly shellModelFactory: IShellModelFactory; + get currentDocument() { return this.project.currentDocument; } @@ -72,25 +76,17 @@ export class Designer { constructor(props: DesignerProps) { makeObservable(this); - const { editor } = props; + const { editor, shellModelFactory } = props; this.editor = editor; + this.shellModelFactory = shellModelFactory; this.setProps(props); this.project = new Project(this, props.defaultSchema); - let startTime: any; - let src = ''; this.dragon.onDragstart((e) => { - startTime = Date.now() / 1000; this.detecting.enable = false; const { dragObject } = e; if (isDragNodeObject(dragObject)) { - const node = dragObject.nodes[0]?.parent; - const npm = node?.componentMeta?.npm; - src = - [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || - node?.componentMeta?.componentName || - ''; if (dragObject.nodes.length === 1) { if (dragObject.nodes[0].parent) { // ensure current selecting @@ -135,34 +131,6 @@ export class Designer { if (nodes) { loc.document.selection.selectAll(nodes.map((o) => o.id)); setTimeout(() => this.activeTracker.track(nodes![0]), 10); - const endTime: any = Date.now() / 1000; - const parent = nodes[0]?.parent; - const npm = parent?.componentMeta?.npm; - const dest = - [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || - parent?.componentMeta?.componentName || - ''; - // eslint-disable-next-line no-unused-expressions - // this.postEvent('drag', { - // time: (endTime - startTime).toFixed(2), - // selected: nodes - // ?.map((n) => { - // if (!n) { - // return; - // } - // // eslint-disable-next-line no-shadow - // const npm = n?.componentMeta?.npm; - // return ( - // [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || - // n?.componentMeta?.componentName - // ); - // }) - // .join('&'), - // align: loc?.detail?.near?.align || '', - // pos: loc?.detail?.near?.pos || '', - // src, - // dest, - // }); } } } diff --git a/packages/designer/src/designer/dragon.ts b/packages/designer/src/designer/dragon.ts index 2e80b5dd4..5abfd049d 100644 --- a/packages/designer/src/designer/dragon.ts +++ b/packages/designer/src/designer/dragon.ts @@ -1,7 +1,6 @@ import { EventEmitter } from 'events'; import { obx, makeObservable } from '@alilc/lowcode-editor-core'; -import { DragNodeObject, DragAnyObject, DragObjectType, DragNodeDataObject, DragObject } from '@alilc/lowcode-types'; -import { Node as ShellNode } from '@alilc/lowcode-shell'; +import { DragNodeObject, DragAnyObject, DragObjectType, DragNodeDataObject, DragObject, IPublicModelNode } from '@alilc/lowcode-types'; import { setNativeSelection, cursor } from '@alilc/lowcode-utils'; import { DropLocation } from './location'; import { Node, DocumentModel } from '../document'; @@ -201,13 +200,13 @@ export class Dragon { * @param dragObject 拖拽对象 * @param boostEvent 拖拽初始时事件 */ - boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node | ShellNode) { + boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node | IPublicModelNode) { const { designer } = this; const masterSensors = this.getMasterSensors(); const handleEvents = makeEventsHandler(boostEvent, masterSensors); const newBie = !isDragNodeObject(dragObject); const forceCopyState = - isDragNodeObject(dragObject) && dragObject.nodes.some((node: Node | ShellNode) => (typeof node.isSlot === 'function' ? node.isSlot() : node.isSlot)); + isDragNodeObject(dragObject) && dragObject.nodes.some((node: Node | IPublicModelNode) => (typeof node.isSlot === 'function' ? node.isSlot() : node.isSlot)); const isBoostFromDragAPI = isDragEvent(boostEvent); let lastSensor: ISensor | undefined; diff --git a/packages/designer/src/designer/setting/setting-prop-entry.ts b/packages/designer/src/designer/setting/setting-prop-entry.ts index 6eb5680a1..dad8cb70d 100644 --- a/packages/designer/src/designer/setting/setting-prop-entry.ts +++ b/packages/designer/src/designer/setting/setting-prop-entry.ts @@ -1,7 +1,6 @@ import { obx, computed, makeObservable, runInAction } from '@alilc/lowcode-editor-core'; import { GlobalEvent, IEditor, ISetValueOptions } from '@alilc/lowcode-types'; import { uniqueId, isJSExpression } from '@alilc/lowcode-utils'; -import { SettingPropEntry as ShellSettingPropEntry } from '@alilc/lowcode-shell'; import { SettingEntry } from './setting-entry'; import { Node } from '../../document'; import { ComponentMeta } from '../../component-meta'; @@ -363,6 +362,6 @@ export class SettingPropEntry implements SettingEntry { } internalToShellPropEntry() { - return ShellSettingPropEntry.create(this) as any; + return this.designer.shellModelFactory.createSettingPropEntry(this); } } diff --git a/packages/designer/src/document/history.ts b/packages/designer/src/document/history.ts index 69f8662a7..96a1e40f7 100644 --- a/packages/designer/src/document/history.ts +++ b/packages/designer/src/document/history.ts @@ -1,7 +1,6 @@ import { EventEmitter } from 'events'; import { reaction, untracked, globalContext, Editor } from '@alilc/lowcode-editor-core'; import { NodeSchema } from '@alilc/lowcode-types'; -import { History as ShellHistory } from '@alilc/lowcode-shell'; export interface Serialization { serialize(data: K): T; @@ -192,10 +191,6 @@ export class History { isModified() { return this.isSavePoint(); } - - internalToShellHistory() { - return new ShellHistory(this); - } } export class Session { diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index a20173a96..ec6cc811b 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -14,10 +14,10 @@ import { CompositeValue, GlobalEvent, ComponentAction, + IPublicModelNode, } from '@alilc/lowcode-types'; import { compatStage, isDOMText, isJSExpression } from '@alilc/lowcode-utils'; import { SettingTopEntry } from '@alilc/lowcode-designer'; -import { Node as ShellNode } from '@alilc/lowcode-shell'; import { Props, getConvertedExtraKey } from './props/props'; import { DocumentModel } from '../document-model'; import { NodeChildren } from './node-children'; @@ -366,8 +366,8 @@ export class Node { this._slotFor = slotFor; } - internalToShellNode(): ShellNode | null { - return ShellNode.create(this); + internalToShellNode(): IPublicModelNode | null { + return this.document.designer.shellModelFactory.createNode(this); } /** diff --git a/packages/designer/src/plugin/plugin-context.ts b/packages/designer/src/plugin/plugin-context.ts index 24c706560..edb515543 100644 --- a/packages/designer/src/plugin/plugin-context.ts +++ b/packages/designer/src/plugin/plugin-context.ts @@ -2,14 +2,14 @@ import { EngineConfig, engineConfig } from '@alilc/lowcode-editor-core'; import { ILowCodePluginManager } from '@alilc/lowcode-designer'; import { - Hotkey, - Project, - Skeleton, - Setters, - Material, - Event, - Common, -} from '@alilc/lowcode-shell'; + IPublicApiHotkey, + IPublicApiProject, + IPublicApiSkeleton, + IPublicApiSetters, + IPublicApiMaterial, + IPublicApiEvent, + IPublicApiCommon, +} from '@alilc/lowcode-types'; import { getLogger, Logger } from '@alilc/lowcode-utils'; import { ILowCodePluginContext, @@ -24,14 +24,14 @@ import { isValidPreferenceKey } from './plugin-utils'; export default class PluginContext implements ILowCodePluginContext, ILowCodePluginContextPrivate { - hotkey: Hotkey; - project: Project; - skeleton: Skeleton; - setters: Setters; - material: Material; - event: Event; + hotkey: IPublicApiHotkey; + project: IPublicApiProject; + skeleton: IPublicApiSkeleton; + setters: IPublicApiSetters; + material: IPublicApiMaterial; + event: IPublicApiEvent; config: EngineConfig; - common: Common; + common: IPublicApiCommon; logger: Logger; plugins: ILowCodePluginManager; preference: IPluginPreferenceMananger; diff --git a/packages/designer/src/plugin/plugin-types.ts b/packages/designer/src/plugin/plugin-types.ts index 2317b11ac..279a1e459 100644 --- a/packages/designer/src/plugin/plugin-types.ts +++ b/packages/designer/src/plugin/plugin-types.ts @@ -1,6 +1,16 @@ -import { CompositeObject, ComponentAction, MetadataTransducer } from '@alilc/lowcode-types'; import Logger from 'zen-logger'; -import { Hotkey, Skeleton, Project, Event, Material, Common } from '@alilc/lowcode-shell'; +import { + IPublicApiHotkey, + IPublicApiProject, + IPublicApiSkeleton, + IPublicApiSetters, + IPublicApiMaterial, + IPublicApiEvent, + IPublicApiCommon, + CompositeObject, + ComponentAction, + MetadataTransducer, +} from '@alilc/lowcode-types'; import { EngineConfig } from '@alilc/lowcode-editor-core'; import { Setters } from '../types'; @@ -95,27 +105,27 @@ export interface IPluginPreferenceMananger { } export interface ILowCodePluginContext { - get skeleton(): Skeleton; - get hotkey(): Hotkey; - get setters(): Setters; + get skeleton(): IPublicApiSkeleton; + get hotkey(): IPublicApiHotkey; + get setters(): IPublicApiSetters; get config(): EngineConfig; - get material(): Material; - get event(): Event; - get project(): Project; - get common(): Common; + get material(): IPublicApiMaterial; + get event(): IPublicApiEvent; + get project(): IPublicApiProject; + get common(): IPublicApiCommon; logger: Logger; plugins: ILowCodePluginManager; preference: IPluginPreferenceMananger; } export interface ILowCodePluginContextPrivate { - set hotkey(hotkey: Hotkey); - set project(project: Project); - set skeleton(skeleton: Skeleton); + set hotkey(hotkey: IPublicApiHotkey); + set project(project: IPublicApiProject); + set skeleton(skeleton: IPublicApiSkeleton); set setters(setters: Setters); - set material(material: Material); - set event(event: Event); + set material(material: IPublicApiMaterial); + set event(event: IPublicApiEvent); set config(config: EngineConfig); - set common(common: Common); + set common(common: IPublicApiCommon); } export interface ILowCodePluginContextApiAssembler { assembleApis: (context: ILowCodePluginContextPrivate) => void; diff --git a/packages/designer/tests/bugs/prop-variable-jse.test.ts b/packages/designer/tests/bugs/prop-variable-jse.test.ts index 648370191..a27fa59cf 100644 --- a/packages/designer/tests/bugs/prop-variable-jse.test.ts +++ b/packages/designer/tests/bugs/prop-variable-jse.test.ts @@ -1,4 +1,3 @@ -// @ts-nocheck import { Editor } from '@alilc/lowcode-editor-core'; import { TransformStage } from '@alilc/lowcode-types'; import { isPlainObject, isVariable, isJSBlock } from '@alilc/lowcode-utils'; @@ -7,6 +6,7 @@ import { Designer } from '../../src/designer/designer'; import { DocumentModel } from '../../src/document/document-model'; import { Project } from '../../src/project/project'; import formSchema from '../fixtures/schema/form'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; /** * bug 背景： @@ -58,7 +58,7 @@ describe('Node 方法测试', () => { it('原始 prop 值是 variable 结构，通过一个 propsReducer 转成了 JSExpression 结构', () => { editor = new Editor(); - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); designer.addPropsReducer(upgradePropsReducer, TransformStage.Upgrade); project = designer.project; doc = new DocumentModel(project, formSchema); diff --git a/packages/designer/tests/builtin-simulator/bem-tools/drag-resize-engine.test.ts b/packages/designer/tests/builtin-simulator/bem-tools/drag-resize-engine.test.ts index 5f52e14b3..ccdc4b2b6 100644 --- a/packages/designer/tests/builtin-simulator/bem-tools/drag-resize-engine.test.ts +++ b/packages/designer/tests/builtin-simulator/bem-tools/drag-resize-engine.test.ts @@ -1,17 +1,12 @@ import '../../fixtures/window'; -import { set } from '../../utils'; import { Editor, globalContext } from '@alilc/lowcode-editor-core'; import { Project } from '../../../src/project/project'; import { DocumentModel } from '../../../src/document/document-model'; import { Designer } from '../../../src/designer/designer'; import DragResizeEngine from '../../../src/builtin-simulator/bem-tools/drag-resize-engine'; import formSchema from '../../fixtures/schema/form'; -import divMetadata from '../../fixtures/component-metadata/div'; -import formMetadata from '../../fixtures/component-metadata/form'; -import otherMeta from '../../fixtures/component-metadata/other'; -import pageMetadata from '../../fixtures/component-metadata/page'; import { fireEvent, createEvent } from '@testing-library/react'; -import { create } from 'lodash'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; describe('DragResizeEngine 测试', () => { let editor: Editor; @@ -26,7 +21,7 @@ describe('DragResizeEngine 测试', () => { }); beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; doc = project.createDocument(formSchema); doc.open(); diff --git a/packages/designer/tests/builtin-simulator/bem-tools/manager.test.tsx b/packages/designer/tests/builtin-simulator/bem-tools/manager.test.tsx index 32e34020f..bed1e27de 100644 --- a/packages/designer/tests/builtin-simulator/bem-tools/manager.test.tsx +++ b/packages/designer/tests/builtin-simulator/bem-tools/manager.test.tsx @@ -1,21 +1,8 @@ import '../../fixtures/window'; -import { set, delayObxTick, delay } from '../../utils'; import { Editor } from '@alilc/lowcode-editor-core'; -import { Project } from '../../../src/project/project'; -import { DocumentModel } from '../../../src/document/document-model'; -import { - isRootNode, - Node, - isNode, - comparePosition, - contains, - insertChild, - insertChildren, - PositionNO, -} from '../../../src/document/node/node'; import { Designer } from '../../../src/designer/designer'; import { BemToolsManager } from '../../../src/builtin-simulator/bem-tools/manager'; -import formSchema from '../../fixtures/schema/form'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; describe('Node 方法测试', () => { let editor: Editor; @@ -26,7 +13,7 @@ describe('Node 方法测试', () => { beforeEach(() => { editor = new Editor(); - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); // project = designer.project; // doc = new DocumentModel(project, formSchema); manager = new BemToolsManager(designer); diff --git a/packages/designer/tests/builtin-simulator/host-view.test.tsx b/packages/designer/tests/builtin-simulator/host-view.test.tsx deleted file mode 100644 index 38ce43bb4..000000000 --- a/packages/designer/tests/builtin-simulator/host-view.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import set from 'lodash/set'; -import cloneDeep from 'lodash/cloneDeep'; -import '../fixtures/window'; -import { Editor } from '@alilc/lowcode-editor-core'; -import { Project } from '../../src/project/project'; -import { Node } from '../../src/document/node/node'; -import TestRenderer from 'react-test-renderer'; -import { configure, render, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import { Designer } from '../../src/designer/designer'; -import formSchema from '../fixtures/schema/form'; -import { getIdsFromSchema, getNodeFromSchemaById } from '../utils'; -import { BuiltinSimulatorHostView } from '../../src/builtin-simulator/host-view'; - -configure({ adapter: new Adapter() }); -const editor = new Editor(); - -describe('host-view 测试', () => { - let designer: Designer; - beforeEach(() => { - designer = new Designer({ editor }); - }); - afterEach(() => { - designer._componentMetasMap.clear(); - designer = null; - }); - - it.skip('host-view', () => { - const hostView = render(); - }); -}); diff --git a/packages/designer/tests/builtin-simulator/host.test.ts b/packages/designer/tests/builtin-simulator/host.test.ts index 37713f330..4b959565d 100644 --- a/packages/designer/tests/builtin-simulator/host.test.ts +++ b/packages/designer/tests/builtin-simulator/host.test.ts @@ -1,4 +1,3 @@ -// @ts-ignore import '../fixtures/window'; import { Editor, globalContext } from '@alilc/lowcode-editor-core'; import { @@ -15,6 +14,7 @@ import formSchema from '../fixtures/schema/form'; import { getMockDocument, getMockWindow, getMockEvent, delayObxTick } from '../utils'; import { BuiltinSimulatorHost } from '../../src/builtin-simulator/host'; import { fireEvent } from '@testing-library/react'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; describe('Host 测试', () => { let editor: Editor; @@ -29,7 +29,7 @@ describe('Host 测试', () => { }); beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; designer.createComponentMeta(pageMetadata); doc = project.createDocument(formSchema); diff --git a/packages/designer/tests/builtin-simulator/viewport.test.ts b/packages/designer/tests/builtin-simulator/viewport.test.ts index 2938e008a..e9972fc7c 100644 --- a/packages/designer/tests/builtin-simulator/viewport.test.ts +++ b/packages/designer/tests/builtin-simulator/viewport.test.ts @@ -1,11 +1,11 @@ import '../fixtures/window'; -import { getMockWindow, set, getMockElement, delay } from '../utils'; +import { getMockWindow, getMockElement, delay } from '../utils'; import { Editor, globalContext } from '@alilc/lowcode-editor-core'; import { Project } from '../../src/project/project'; import { DocumentModel } from '../../src/document/document-model'; import Viewport from '../../src/builtin-simulator/viewport'; import { Designer } from '../../src/designer/designer'; -import { fireEvent } from '@testing-library/react'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; describe('Viewport 测试', () => { @@ -28,7 +28,7 @@ describe('Viewport 测试', () => { }); beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; // doc = project.createDocument(formSchema); }); diff --git a/packages/designer/tests/designer/builtin-hotkey.test.ts b/packages/designer/tests/designer/builtin-hotkey.test.ts index d0fa8a47f..6e7699d4a 100644 --- a/packages/designer/tests/designer/builtin-hotkey.test.ts +++ b/packages/designer/tests/designer/builtin-hotkey.test.ts @@ -5,6 +5,7 @@ import formSchema from '../fixtures/schema/form'; import '../../src/designer/builtin-hotkey'; import { fireEvent } from '@testing-library/react'; import { isInLiveEditing } from '../../src/designer/builtin-hotkey'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; const editor = new Editor(); @@ -23,7 +24,7 @@ describe('快捷键测试', () => { globalContext.register(editor, Editor); }); beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); editor.set('designer', designer); designer.project.open(formSchema); }); diff --git a/packages/designer/tests/designer/designer.test.ts b/packages/designer/tests/designer/designer.test.ts index 3dd4749cd..c6d8658c4 100644 --- a/packages/designer/tests/designer/designer.test.ts +++ b/packages/designer/tests/designer/designer.test.ts @@ -12,6 +12,7 @@ import divMetadata from '../fixtures/component-metadata/div'; import { delayObxTick } from '../utils'; import { fireEvent } from '@testing-library/react'; import { DragObjectType } from '@alilc/lowcode-types'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; const mockNode = { internalToShellNode() { @@ -32,7 +33,7 @@ describe('Designer 测试', () => { }); beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; doc = project.createDocument(formSchema); dragon = new Dragon(designer); @@ -58,6 +59,7 @@ describe('Designer 测试', () => { const designer = new Designer({ editor, + shellModelFactory, onDragstart: dragStartMockFn, onDrag: dragMockFn, onDragend: dragEndMockFn, @@ -124,6 +126,7 @@ describe('Designer 测试', () => { const designer = new Designer({ editor, + shellModelFactory, onDragstart: dragStartMockFn, onDrag: dragMockFn, onDragend: dragEndMockFn, @@ -245,14 +248,18 @@ describe('Designer 测试', () => { suspensed: true, componentMetadatas: [buttonMetadata, divMetadata], }; - designer = new Designer({ editor, ...initialProps }); + designer = new Designer({ + editor, + shellModelFactory, + ...initialProps, + }); expect(designer.simulatorComponent).toEqual({ isSimulatorComp: true }); expect(designer.simulatorProps).toEqual({ designMode: 'design' }); expect(designer.suspensed).toBeTruthy(); - expect(designer._componentMetasMap.has('Div')).toBeTruthy(); - expect(designer._componentMetasMap.has('Button')).toBeTruthy(); - const { editor: editorFromDesigner, ...others } = designer.props; + expect((designer as any)._componentMetasMap.has('Div')).toBeTruthy(); + expect((designer as any)._componentMetasMap.has('Button')).toBeTruthy(); + const { editor: editorFromDesigner, shellModelFactory: shellModelFactoryFromDesigner, ...others } = (designer as any).props; expect(others).toEqual(initialProps); expect(designer.get('simulatorProps')).toEqual({ designMode: 'design' }); expect(designer.get('suspensed')).toBeTruthy(); @@ -270,9 +277,9 @@ describe('Designer 测试', () => { expect(designer.simulatorComponent).toEqual({ isSimulatorComp2: true }); expect(designer.simulatorProps).toEqual({ designMode: 'live' }); expect(designer.suspensed).toBeFalsy(); - expect(designer._componentMetasMap.has('Button')).toBeTruthy(); - expect(designer._componentMetasMap.has('Div')).toBeTruthy(); - const { editor: editorFromDesigner2, ...others2 } = designer.props; + expect((designer as any)._componentMetasMap.has('Button')).toBeTruthy(); + expect((designer as any)._componentMetasMap.has('Div')).toBeTruthy(); + const { editor: editorFromDesigner2, shellModelFactory: shellModelFactoryFromDesigner2, ...others2 } = (designer as any).props; expect(others2).toEqual(updatedProps); // 第三次设置 props，跟第二次值一样，for 覆盖率测试 @@ -282,9 +289,9 @@ describe('Designer 测试', () => { expect(designer.simulatorComponent).toEqual({ isSimulatorComp2: true }); expect(designer.simulatorProps).toEqual({ designMode: 'live' }); expect(designer.suspensed).toBeFalsy(); - expect(designer._componentMetasMap.has('Button')).toBeTruthy(); - expect(designer._componentMetasMap.has('Div')).toBeTruthy(); - const { editor: editorFromDesigner3, ...others3 } = designer.props; + expect((designer as any)._componentMetasMap.has('Button')).toBeTruthy(); + expect((designer as any)._componentMetasMap.has('Div')).toBeTruthy(); + const { editor: editorFromDesigner3, shellModelFactory: shellModelFactoryFromDesigner3, ...others3 } = (designer as any).props; expect(others3).toEqual(updatedProps); }); diff --git a/packages/designer/tests/designer/dragon.test.ts b/packages/designer/tests/designer/dragon.test.ts index 42216f06d..bfafa0651 100644 --- a/packages/designer/tests/designer/dragon.test.ts +++ b/packages/designer/tests/designer/dragon.test.ts @@ -1,5 +1,4 @@ import '../fixtures/window'; -import { set } from '../utils'; import { Editor, globalContext } from '@alilc/lowcode-editor-core'; import { Project } from '../../src/project/project'; import { DocumentModel } from '../../src/document/document-model'; @@ -18,6 +17,7 @@ import { import { DragObjectType } from '@alilc/lowcode-types'; import formSchema from '../fixtures/schema/form'; import { fireEvent } from '@testing-library/react'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; describe('Dragon 测试', () => { let editor: Editor; @@ -32,7 +32,7 @@ describe('Dragon 测试', () => { }); beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; doc = project.createDocument(formSchema); dragon = new Dragon(designer); diff --git a/packages/designer/tests/designer/scroller.test.ts b/packages/designer/tests/designer/scroller.test.ts index 5265596c6..ff03608b0 100644 --- a/packages/designer/tests/designer/scroller.test.ts +++ b/packages/designer/tests/designer/scroller.test.ts @@ -8,6 +8,7 @@ import { Dragon, } from '../../src/designer/dragon'; import formSchema from '../fixtures/schema/form'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; describe('Scroller 测试', () => { let editor: Editor; @@ -22,7 +23,7 @@ describe('Scroller 测试', () => { }); beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; doc = project.createDocument(formSchema); dragon = new Dragon(designer); diff --git a/packages/designer/tests/designer/setting/setting-field.test.ts b/packages/designer/tests/designer/setting/setting-field.test.ts index 0e600e2ea..fb8c9d16f 100644 --- a/packages/designer/tests/designer/setting/setting-field.test.ts +++ b/packages/designer/tests/designer/setting/setting-field.test.ts @@ -1,7 +1,6 @@ // @ts-nocheck import '../../fixtures/window'; import { Editor } from '@alilc/lowcode-editor-core'; -import { Project } from '../../../src/project/project'; import { SettingTopEntry } from '../../../src/designer/setting/setting-top-entry'; import { SettingField } from '../../../src/designer/setting/setting-field'; import { Node } from '../../../src/document/node/node'; @@ -10,6 +9,7 @@ import settingSchema from '../../fixtures/schema/setting'; import buttonMeta from '../../fixtures/component-metadata/button'; import { DocumentModel } from 'designer/src/document'; import { delayObxTick } from '../../utils'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; const editor = new Editor(); @@ -17,7 +17,7 @@ describe('setting-field 测试', () => { let designer: Designer; let doc: DocumentModel; beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); designer.createComponentMeta(buttonMeta); doc = designer.project.open(settingSchema); }); diff --git a/packages/designer/tests/designer/setting/setting-prop-entry.test.ts b/packages/designer/tests/designer/setting/setting-prop-entry.test.ts index 72b394035..c9aee1244 100644 --- a/packages/designer/tests/designer/setting/setting-prop-entry.test.ts +++ b/packages/designer/tests/designer/setting/setting-prop-entry.test.ts @@ -1,18 +1,13 @@ -// @ts-nocheck -import set from 'lodash/set'; -import cloneDeep from 'lodash/cloneDeep'; import '../../fixtures/window'; import { Editor } from '@alilc/lowcode-editor-core'; -import { Project } from '../../../src/project/project'; import { SettingTopEntry } from '../../../src/designer/setting/setting-top-entry'; import { SettingPropEntry } from '../../../src/designer/setting/setting-prop-entry'; import { Node } from '../../../src/document/node/node'; import { Designer } from '../../../src/designer/designer'; -import formSchema from '../../../fixtures/schema/form'; import settingSchema from '../../fixtures/schema/setting'; import divMeta from '../../fixtures/component-metadata/div'; -import { getIdsFromSchema, getNodeFromSchemaById } from '../../utils'; import { DocumentModel } from 'designer/src/document'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; const editor = new Editor(); @@ -20,7 +15,7 @@ describe('setting-prop-entry 测试', () => { let designer: Designer; let doc: DocumentModel; beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); designer.createComponentMeta(divMeta); doc = designer.project.open(settingSchema); }); diff --git a/packages/designer/tests/designer/setting/setting-top-entry.test.ts b/packages/designer/tests/designer/setting/setting-top-entry.test.ts index e7a2a7a66..caad12917 100644 --- a/packages/designer/tests/designer/setting/setting-top-entry.test.ts +++ b/packages/designer/tests/designer/setting/setting-top-entry.test.ts @@ -1,22 +1,17 @@ -// @ts-nocheck -import set from 'lodash/set'; -import cloneDeep from 'lodash/cloneDeep'; import '../../fixtures/window'; import { Editor } from '@alilc/lowcode-editor-core'; -import { Project } from '../../../src/project/project'; import { Node } from '../../../src/document/node/node'; import { Designer } from '../../../src/designer/designer'; -import formSchema from '../../fixtures/schema/form'; import settingSchema from '../../fixtures/schema/setting'; import divMeta from '../../fixtures/component-metadata/div'; -import { getIdsFromSchema, getNodeFromSchemaById } from '../../utils'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; const editor = new Editor(); describe('setting-top-entry 测试', () => { let designer: Designer; beforeEach(() => { - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); }); afterEach(() => { designer._componentMetasMap.clear(); diff --git a/packages/designer/tests/document/document-model/document-model.test.ts b/packages/designer/tests/document/document-model/document-model.test.ts index 1061a609c..9eb7b41ff 100644 --- a/packages/designer/tests/document/document-model/document-model.test.ts +++ b/packages/designer/tests/document/document-model/document-model.test.ts @@ -2,15 +2,13 @@ import '../../fixtures/window'; import { DocumentModel, isDocumentModel, isPageSchema } from '../../../src/document/document-model'; import { Editor } from '@alilc/lowcode-editor-core'; import { Project } from '../../../src/project/project'; -import { Node } from '../../../src/document/node/node'; import { Designer } from '../../../src/designer/designer'; import formSchema from '../../fixtures/schema/form'; import divMeta from '../../fixtures/component-metadata/div'; import formMeta from '../../fixtures/component-metadata/form'; import otherMeta from '../../fixtures/component-metadata/other'; import pageMeta from '../../fixtures/component-metadata/page'; -// const { DocumentModel } = require('../../../src/document/document-model'); -// const { Node } = require('../__mocks__/node'); +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; describe('document-model 测试', () => { let editor: Editor; @@ -19,7 +17,7 @@ describe('document-model 测试', () => { beforeEach(() => { editor = new Editor(); - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; }); diff --git a/packages/designer/tests/document/history/history.test.ts b/packages/designer/tests/document/history/history.test.ts index a4c6d3a66..960b183f9 100644 --- a/packages/designer/tests/document/history/history.test.ts +++ b/packages/designer/tests/document/history/history.test.ts @@ -272,20 +272,6 @@ describe('History', () => { expect(history.records).toHaveLength(0); }); - it('internalToShellHistory()', async () => { - const history = new History( - () => { - const data = tree.toObject(); - return data; - }, - (data) => { - mockRedoFn(data); - }, - ); - - expect(history.internalToShellHistory().isModified).toBeUndefined(); - }); - it('sleep & wakeup', async () => { const mockRedoFn = jest.fn(); const history = new History( diff --git a/packages/designer/tests/document/node/modal-nodes-manager.test.ts b/packages/designer/tests/document/node/modal-nodes-manager.test.ts index 80ca53b3e..3e5dcdb79 100644 --- a/packages/designer/tests/document/node/modal-nodes-manager.test.ts +++ b/packages/designer/tests/document/node/modal-nodes-manager.test.ts @@ -7,6 +7,7 @@ import { Designer } from '../../../src/designer/designer'; import formSchema from '../../fixtures/schema/form-with-modal'; import dlgMetadata from '../../fixtures/component-metadata/dialog'; import { getModalNodes } from '../../../src/document/node/modal-nodes-manager'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; let editor: Editor; let designer: Designer; @@ -15,7 +16,7 @@ let doc: DocumentModel; beforeEach(() => { editor = new Editor(); - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); designer.createComponentMeta(dlgMetadata); project = designer.project; doc = new DocumentModel(project, formSchema); diff --git a/packages/designer/tests/document/node/node-children.test.ts b/packages/designer/tests/document/node/node-children.test.ts index c48c9e708..1aa7e3ccb 100644 --- a/packages/designer/tests/document/node/node-children.test.ts +++ b/packages/designer/tests/document/node/node-children.test.ts @@ -8,6 +8,7 @@ import { import { Designer } from '../../../src/designer/designer'; import formSchema from '../../fixtures/schema/form'; import divMetadata from '../../fixtures/component-metadata/div'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; describe('NodeChildren 方法测试', () => { let editor: Editor; @@ -17,7 +18,7 @@ describe('NodeChildren 方法测试', () => { beforeEach(() => { editor = new Editor(); - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; doc = new DocumentModel(project, formSchema); }); diff --git a/packages/designer/tests/document/node/node.test.ts b/packages/designer/tests/document/node/node.test.ts index 113360d44..d8915c991 100644 --- a/packages/designer/tests/document/node/node.test.ts +++ b/packages/designer/tests/document/node/node.test.ts @@ -1,6 +1,6 @@ // @ts-nocheck import '../../fixtures/window'; -import { set, delayObxTick, delay } from '../../utils'; +import { set } from '../../utils'; import { Editor } from '@alilc/lowcode-editor-core'; import { Project } from '../../../src/project/project'; import { DocumentModel } from '../../../src/document/document-model'; @@ -10,8 +10,6 @@ import { isNode, comparePosition, contains, - insertChild, - insertChildren, PositionNO, } from '../../../src/document/node/node'; import { Designer } from '../../../src/designer/designer'; @@ -20,11 +18,11 @@ import divMetadata from '../../fixtures/component-metadata/div'; import dialogMetadata from '../../fixtures/component-metadata/dialog'; import btnMetadata from '../../fixtures/component-metadata/button'; import formMetadata from '../../fixtures/component-metadata/form'; -import otherMeta from '../../fixtures/component-metadata/other'; import pageMetadata from '../../fixtures/component-metadata/page'; import rootHeaderMetadata from '../../fixtures/component-metadata/root-header'; import rootContentMetadata from '../../fixtures/component-metadata/root-content'; import rootFooterMetadata from '../../fixtures/component-metadata/root-footer'; +import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory'; describe('Node 方法测试', () => { let editor: Editor; @@ -34,7 +32,7 @@ describe('Node 方法测试', () => { beforeEach(() => { editor = new Editor(); - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; doc = new DocumentModel(project, formSchema); }); diff --git a/packages/designer/tests/document/node/props/prop.test.ts b/packages/designer/tests/document/node/props/prop.test.ts index d7b125430..3d7914a85 100644 --- a/packages/designer/tests/document/node/props/prop.test.ts +++ b/packages/designer/tests/document/node/props/prop.test.ts @@ -1,11 +1,10 @@ -// @ts-nocheck import '../../../fixtures/window'; -import { delayObxTick } from '../../../utils'; import { Editor, engineConfig } from '@alilc/lowcode-editor-core'; import { Designer } from '../../../../src/designer/designer'; import { DocumentModel } from '../../../../src/document/document-model'; import { Prop, isProp, isValidArrayIndex } from '../../../../src/document/node/props/prop'; import { TransformStage } from '@alilc/lowcode-types'; +import { shellModelFactory } from '../../../../../engine/src/modules/shell-model-factory'; const slotNodeImportMockFn = jest.fn(); const slotNodeRemoveMockFn = jest.fn(); @@ -465,7 +464,7 @@ describe('Prop 类测试', () => { describe('slotNode / setAsSlot', () => { const editor = new Editor(); - const designer = new Designer({ editor }); + const designer = new Designer({ editor, shellModelFactory }); const doc = new DocumentModel(designer.project, { componentName: 'Page', children: [ diff --git a/packages/designer/tests/project/project-methods.test.ts b/packages/designer/tests/project/project-methods.test.ts index 0e545e4f4..b546f8f52 100644 --- a/packages/designer/tests/project/project-methods.test.ts +++ b/packages/designer/tests/project/project-methods.test.ts @@ -1,13 +1,10 @@ -import set from 'lodash/set'; -import cloneDeep from 'lodash/cloneDeep'; import '../fixtures/window'; import { Editor } from '@alilc/lowcode-editor-core'; import { Project } from '../../src/project/project'; import { DocumentModel } from '../../src/document/document-model'; -import { Node } from '../../src/document/node/node'; import { Designer } from '../../src/designer/designer'; import formSchema from '../fixtures/schema/form'; -import { getIdsFromSchema, getNodeFromSchemaById } from '../utils'; +import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory'; describe.only('Project 方法测试', () => { let editor: Editor; @@ -17,7 +14,7 @@ describe.only('Project 方法测试', () => { beforeEach(() => { editor = new Editor(); - designer = new Designer({ editor }); + designer = new Designer({ editor, shellModelFactory }); project = designer.project; doc = new DocumentModel(project, formSchema); }); diff --git a/packages/designer/tsconfig.json b/packages/designer/tsconfig.json new file mode 100644 index 000000000..9136085c9 --- /dev/null +++ b/packages/designer/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib", + "types": ["node","jest"] + }, + "include": [ + "./src/", + "./tests/" + ], + "exclude": ["**/lib", "**/es", "node_modules"] +} diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index 55355f574..acc961c16 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -32,6 +32,7 @@ import { getLogger, isPlainObject } from '@alilc/lowcode-utils'; import './modules/live-editing'; import classes from './modules/classes'; import symbols from './modules/symbols'; +import { shellModelFactory } from './modules/shell-model-factory'; export * from './modules/skeleton-types'; export * from './modules/designer-types'; @@ -46,7 +47,7 @@ globalContext.register(editor, 'editor'); const innerSkeleton = new InnerSkeleton(editor); editor.set('skeleton' as any, innerSkeleton); -const designer = new Designer({ editor }); +const designer = new Designer({ editor, shellModelFactory }); editor.set('designer' as any, designer); const { project: innerProject } = designer; diff --git a/packages/engine/src/modules/shell-model-factory.ts b/packages/engine/src/modules/shell-model-factory.ts new file mode 100644 index 000000000..05c7b19cb --- /dev/null +++ b/packages/engine/src/modules/shell-model-factory.ts @@ -0,0 +1,18 @@ +import { + Node as InnerNode, + SettingField as InnerSettingField, +} from '@alilc/lowcode-designer'; +import { IShellModelFactory, IPublicModelNode, IPublicModelSettingPropEntry } from '@alilc/lowcode-types'; +import { + Node, + SettingPropEntry, +} from '@alilc/lowcode-shell'; +class ShellModelFactory implements IShellModelFactory { + createNode(node: InnerNode | null | undefined): IPublicModelNode | null { + return Node.create(node); + } + createSettingPropEntry(prop: InnerSettingField): IPublicModelSettingPropEntry { + return SettingPropEntry.create(prop); + } +} +export const shellModelFactory = new ShellModelFactory(); \ No newline at end of file diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 708c34326..8ebd29693 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -27,5 +27,6 @@ export * from './editor-skeleton'; export * from './designer'; export * from './dragon'; export * from './shell'; +export * from './shell-model-factory'; // TODO: remove this in future versions export * from './deprecated'; diff --git a/packages/types/src/shell-model-factory.ts b/packages/types/src/shell-model-factory.ts new file mode 100644 index 000000000..a7a57648f --- /dev/null +++ b/packages/types/src/shell-model-factory.ts @@ -0,0 +1,8 @@ +import { IPublicModelSettingPropEntry, IPublicModelNode } from './shell'; + +export interface IShellModelFactory { + // TODO: 需要给 innerNode 提供一个 interface 并用在这里 + createNode(node: any | null | undefined): IPublicModelNode | null; + // TODO: 需要给 InnerSettingField 提供一个 interface 并用在这里 + createSettingPropEntry(prop: any): IPublicModelSettingPropEntry; +} diff --git a/packages/types/src/shell/index.ts b/packages/types/src/shell/index.ts index c0b2d5280..0ee50daea 100644 --- a/packages/types/src/shell/index.ts +++ b/packages/types/src/shell/index.ts @@ -1,5 +1,7 @@ -import { IPublicModelNode } from './model/node'; -import { IPublicModelProp } from './model/prop'; +import { + IPublicModelNode, + IPublicModelProp, +} from './model'; export interface PropChangeOptions { key?: string | number;