diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 578d11f81..c3aaf3322 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -287,11 +287,11 @@ export default class Designer { } get schema(): ProjectSchema { - return this.project.schema; + return this.project.getSchema(); } - setSchema(schema: ProjectSchema) { - // todo: + setSchema(schema?: ProjectSchema) { + this.project.setSchema(schema); } @obx.val private _componentMetasMap = new Map(); diff --git a/packages/designer/src/designer/document/document-model.ts b/packages/designer/src/designer/document/document-model.ts index 7d7b31123..d17f8c9a8 100644 --- a/packages/designer/src/designer/document/document-model.ts +++ b/packages/designer/src/designer/document/document-model.ts @@ -390,6 +390,8 @@ export default class DocumentModel { // todo: } + purge() {} + checkNesting(dropTarget: NodeParent, dragObject: DragNodeObject | DragNodeDataObject): boolean { let items: Array; if (isDragNodeDataObject(dragObject)) { diff --git a/packages/designer/src/designer/project.ts b/packages/designer/src/designer/project.ts index e64610e2f..dcad2f488 100644 --- a/packages/designer/src/designer/project.ts +++ b/packages/designer/src/designer/project.ts @@ -7,25 +7,14 @@ export default class Project { private emitter = new EventEmitter(); @obx.val readonly documents: DocumentModel[] = []; - private data: ProjectSchema; + private data: ProjectSchema = { version: '1.0.0', componentsMap: [], componentsTree: [] }; @obx.ref canvasDisplayMode: 'exclusive' | 'overview' = 'exclusive'; // TODO: 考虑项目级别 History constructor(readonly designer: Designer, schema?: ProjectSchema) { - this.data = { - version: '1.0.0', - componentsMap: [], - componentsTree: [], - ...schema, - }; - this.open( - this.data.componentsTree[0] || { - componentName: 'Page', - fileName: '', - }, - ); + this.setSchema(schema); } @computed get currentDocument() { @@ -35,7 +24,7 @@ export default class Project { /** * 获取项目整体 schema */ - get schema(): ProjectSchema { + getSchema(): ProjectSchema { return { ...this.data, componentsTree: this.documents.map(doc => doc.schema), @@ -45,7 +34,24 @@ export default class Project { /** * 整体设置项目 schema */ - set schema(schema: ProjectSchema) {} + setSchema(schema?: ProjectSchema) { + this.data = { + version: '1.0.0', + componentsMap: [], + componentsTree: [], + ...schema, + }; + if (this.documents.length > 0) { + this.documents.forEach(doc => doc.purge()); + this.documents.length = 0; + } + this.open( + this.data.componentsTree[0] || { + componentName: 'Page', + fileName: '', + }, + ); + } /** * 分字段设置储存数据，不记录操作记录 diff --git a/packages/editor/src/config/skeleton.js b/packages/editor/src/config/skeleton.js index b624b8a41..d28706570 100644 --- a/packages/editor/src/config/skeleton.js +++ b/packages/editor/src/config/skeleton.js @@ -147,6 +147,19 @@ export default { disableAppComponent: true } }, + { + pluginKey: 'outlineTree', + type: 'PanelIcon', + props: { + align: 'top', + icon: 'dengpao', + title: '大纲树' + }, + config: { + version: '^1.0.0' + }, + pluginProps: {} + }, { pluginKey: 'leftPanelIcon', type: 'PanelIcon', @@ -238,7 +251,6 @@ export default { } ], rightArea: [ - /* { pluginKey: 'settings', type: 'Panel', @@ -247,16 +259,7 @@ export default { version: '^1.0.0' }, pluginProps: {} - },*/ - { - pluginKey: 'outlineTree', - type: 'Panel', - props: {}, - config: { - version: '^1.0.0' - }, - pluginProps: {} - } + }, ], centerArea: [ { diff --git a/packages/plugin-outline-tree/src/icons/border-outer.svg b/packages/plugin-outline-tree/src/icons/border-outer.svg deleted file mode 100644 index be86f4793..000000000 --- a/packages/plugin-outline-tree/src/icons/border-outer.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/plugin-outline-tree/src/main.ts b/packages/plugin-outline-tree/src/main.ts index 3f95eae45..1b93beee9 100644 --- a/packages/plugin-outline-tree/src/main.ts +++ b/packages/plugin-outline-tree/src/main.ts @@ -489,14 +489,15 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable { * @see IScrollBoard */ scrollToNode(treeNode: TreeNode, detail?: any, tryTimes: number = 0) { - this.tryScrollAgain = null; + if (tryTimes < 1 && this.tryScrollAgain) { + (window as any).cancelIdleCallback(this.tryScrollAgain); + this.tryScrollAgain = null; + } if (this.sensing || !this.bounds || !this.scroller || !this.scrollTarget) { // is a active sensor return; } - const opt: any = {}; - let scroll = false; let rect: ClientRect | undefined; if (detail && isLocationChildrenDetail(detail)) { rect = this.getInsertionRect(); @@ -505,24 +506,25 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable { } if (!rect) { - if (!this.tryScrollAgain && tryTimes < 3) { - this.tryScrollAgain = requestAnimationFrame(() => this.scrollToNode(treeNode, detail, tryTimes + 1)); + if (tryTimes < 3) { + this.tryScrollAgain = (window as any).requestIdleCallback(() => this.scrollToNode(treeNode, detail, tryTimes + 1)); } return; } - const scrollTarget = this.scrollTarget; - const st = scrollTarget.top; - const scrollHeight = scrollTarget.scrollHeight; + const { scrollHeight, top: scrollTop } = this.scrollTarget; const { height, top, bottom } = this.bounds; - if (rect.top < top || rect.bottom > bottom) { - opt.top = Math.min(rect.top + rect.height / 2 + st - top - height / 2, scrollHeight - height); - scroll = true; - } - - if (scroll) { + const opt: any = {}; + opt.top = Math.min(rect.top + rect.height / 2 + scrollTop - top - height / 2, scrollHeight - height); + if (rect.height >= height) { + opt.top = Math.min(scrollTop + rect.top - top, opt.top); + } this.scroller.scrollTo(opt); } + // make tail scroll be sure + if (tryTimes < 4) { + this.tryScrollAgain = (window as any).requestIdleCallback(() => this.scrollToNode(treeNode, detail, 4)); + } } private sensing = false; diff --git a/packages/plugin-outline-tree/src/views/tree-title.tsx b/packages/plugin-outline-tree/src/views/tree-title.tsx index a3bad394e..e81acf45a 100644 --- a/packages/plugin-outline-tree/src/views/tree-title.tsx +++ b/packages/plugin-outline-tree/src/views/tree-title.tsx @@ -188,7 +188,9 @@ class ExpandBtn extends Component<{
{ - e.stopPropagation(); + if (treeNode.expanded) { + e.stopPropagation(); + } treeNode.setExpanded(!treeNode.expanded); }} > diff --git a/packages/plugin-outline-tree/src/views/tree.tsx b/packages/plugin-outline-tree/src/views/tree.tsx index 3349f8761..8db35d286 100644 --- a/packages/plugin-outline-tree/src/views/tree.tsx +++ b/packages/plugin-outline-tree/src/views/tree.tsx @@ -36,11 +36,14 @@ export default class TreeView extends Component<{ tree: Tree }> { private onClick = (e: ReactMouseEvent) => { if (this.ignoreUpSelected) { + this.boostEvent = undefined; return; } if (this.boostEvent && isShaken(this.boostEvent, e.nativeEvent)) { + this.boostEvent = undefined; return; } + this.boostEvent = undefined; const treeNode = this.getTreeNodeFromEvent(e); if (!treeNode) { return; @@ -105,6 +108,8 @@ export default class TreeView extends Component<{ tree: Tree }> { selection.remove(doc.rootNode.id); // 获得顶层 nodes nodes = selection.getTopNodes(); + } else if (selection.has(node.id)) { + nodes = selection.getTopNodes(); } this.boostEvent = e.nativeEvent; designer.dragon.boost(