diff --git a/packages/designer/src/designer/dragon.ts b/packages/designer/src/designer/dragon.ts index ec611e91a..99eb756da 100644 --- a/packages/designer/src/designer/dragon.ts +++ b/packages/designer/src/designer/dragon.ts @@ -3,7 +3,7 @@ import { obx } from '@recore/obx'; import Location from './location'; import DocumentModel from './document/document-model'; import { NodeData } from './schema'; -import { SimulatorInterface } from './simulator-interface'; +import { ISimulator } from './simulator'; import Node from './document/node/node'; import Designer from './designer'; @@ -167,7 +167,7 @@ export default class Dragon { }; } - getMasterSensors(): SimulatorInterface[] { + getMasterSensors(): ISimulator[] { return this.designer.project.documents.map(doc => (doc.actived && doc.simulator) || null).filter(Boolean); } @@ -319,7 +319,7 @@ export default class Dragon { return evt; }; - function getSourceSensor(dragObject: DragObject): SimulatorInterface | null { + function getSourceSensor(dragObject: DragObject): ISimulator | null { if (!isDragNodeObject(dragObject)) { return null; } diff --git a/packages/designer/src/designer/project.ts b/packages/designer/src/designer/project.ts index 2b861ba06..3ec4d2fea 100644 --- a/packages/designer/src/designer/project.ts +++ b/packages/designer/src/designer/project.ts @@ -1,68 +1,65 @@ import { obx, computed } from '@recore/obx'; -import { ProjectSchema } from './schema'; +import { ProjectSchema, RootSchema } from './schema'; import { EventEmitter } from 'events'; import Designer from './designer'; -import DocumentModel from './document/document-model'; +import DocumentModel, { isDocumentModel } from './document/document-model'; export default class Project { private emitter = new EventEmitter(); @obx.val readonly documents: DocumentModel[] = []; - private data: ProjectSchema = {}; + + private data: ProjectSchema; @obx.ref canvasDisplayMode: 'exclusive' | 'overview' = 'exclusive'; - // 考虑项目级别 History + // TODO: 考虑项目级别 History constructor(readonly designer: Designer, schema?: ProjectSchema) { this.data = { version: '1.0.0', componentsMap: [], componentsTree: [], - ...schema + ...schema, }; + this.open(this.data.componentsTree[0] || { + componentName: 'Page', + fileName: '', + }); } @computed get activedDocuments() { return this.documents.filter(doc => doc.actived); } - getDocument(fileName: string): DocumentContext {} - - addDocument(data: DocumentSchema): DocumentContext { - this.documents.push(new DocumentContext(data)); - } - /** * 获取项目整体 schema */ get schema(): ProjectSchema { return { ...this.data, - componentsTree: this.documents.map(doc => doc.getSchema()), + componentsTree: this.documents.map(doc => doc.schema), }; } /** * 整体设置项目 schema */ - set schema(schema: ProjectSchema) { - - } + set schema(schema: ProjectSchema) {} /** * 分字段设置储存数据，不记录操作记录 */ set( key: - | 'version' - | 'componentsTree' - | 'componentsMap' - | 'utils' - | 'constants' - | 'i18n' - | 'css' - | 'dataSource' - | string, + | 'version' + | 'componentsTree' + | 'componentsMap' + | 'utils' + | 'constants' + | 'i18n' + | 'css' + | 'dataSource' + | string, value: any, ): void {} @@ -71,26 +68,62 @@ export default class Project { */ get( key: - | 'version' - | 'componentsTree' - | 'componentsMap' - | 'utils' - | 'constants' - | 'i18n' - | 'css' - | 'dataSource' - | string, - ): any; + | 'version' + | 'componentsTree' + | 'componentsMap' + | 'utils' + | 'constants' + | 'i18n' + | 'css' + | 'dataSource' + | string, + ): any {} - edit(document): void {} + open(doc: string | DocumentModel | RootSchema): void { + if (typeof doc === 'string') { + const got = this.documents.find(item => item.fileName === doc); + if (got) { + return got.open(); + } + + const data = this.data.componentsTree.find(data => data.fileName === doc); + if (data) { + doc = new DocumentModel(this, data); + this.documents.push(doc); + doc.open(); + } + + return; + } + + if (isDocumentModel(doc)) { + return doc.open(); + } + + doc = new DocumentModel(this, doc); + this.documents.push(doc); + doc.open(); + } + + checkExclusive(actived: DocumentModel) { + if (this.canvasDisplayMode !== 'exclusive') { + return; + } + this.documents.forEach((doc) => { + if (doc !== actived) { + doc.suspense(); + } + }); + } + + closeOthers(opened: DocumentModel) { + this.documents.forEach((doc) => { + if (doc !== opened) { + doc.close(); + } + }); + } - /** - * documents 列表发生变化 - */ - onDocumentsChange(fn: (documents: DocumentContext[]) => void): () => void {} - /** - * - */ // 通知标记删除，需要告知服务端 // 项目角度编辑不是全量打开所有文档，是按需加载，哪个更新就通知更新谁， // 哪个删除就 diff --git a/packages/designer/src/designer/simulator-interface.ts b/packages/designer/src/designer/simulator-interface.ts deleted file mode 100644 index 8bbf7bde6..000000000 --- a/packages/designer/src/designer/simulator-interface.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { NpmInfo } from './schema'; -import { ComponentClass as ReactComponentClass, Component as ReactComponent, ComponentType } from 'react'; -import { LocateEvent, ISensor } from './dragon'; -import { Point } from './location'; -import Node from './document/node/node'; - -export interface SimulatorInterface

extends ISensor { - /** - * 获得边界维度等信息 - */ - readonly bounds: object; - - // dependsAsset // like react jQuery lodash - // themesAsset - // componentsAsset - // simulatorUrl // - // utils, dataSource, constants 模拟 - // - // later: - // layout: ComponentName - // 获取区块代码, 通过 components 传递，可异步获取 - setProps(props: P): void; - - /** - * 设置编辑模式 - */ - setDesignMode(mode: "live" | "design" | string): void; - - /** - * 设置拖拽态 - */ - setDraggingState(state: boolean): void; - - /** - * 是否拖拽态 - */ - isDraggingState(): boolean; - - /** - * 设置拷贝态 - */ - setCopyState(state: boolean): void; - - /** - * 是否拷贝态 - */ - isCopyState(): boolean; - - /** - * 清除所有态：拖拽态、拷贝态 - */ - clearState(): void; - - /** - * 在模拟器拖拽定位 - */ - locate(e: LocateEvent): any; - - /** - * 滚动视口到节点 - */ - scrollToNode(node: Node, detail?: any): void; - - /** - * 给 event 打补丁，添加 canvasX, globalX 等信息，用于拖拽 - */ - fixEvent(e: LocateEvent): LocateEvent; - - /** - * 全局坐标系转化为本地坐标系 - */ - toLocalPoint(point: Point): Point; - - /** - * 本地坐标系转化为全局坐标系 - */ - toGlobalPoint(point: Point): Point; - - /** - * 根据组件信息获取组件类 - */ - getComponent(componentName: string): Component | any; - /** - * 根据节点获取节点的组件实例 - */ - getComponentInstance(node: Node): ComponentInstance[] | null; - /** - * 根据节点获取节点的组件运行上下文 - */ - getComponentContext(node: Node): object; - - /** - * 设置挂起 - */ - setSuspense(suspended: boolean): void; - - /** - * 销毁 - */ - purge(): void; -} - -/** - * 组件类定义 - */ -export type Component = ComponentType | object; - -/** - * 组件实例定义 - */ -export type ComponentInstance = Element | ReactComponent | object;