diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts index 6d1da4de..7d1451eb 100644 --- a/packages/editor/src/services/editor.ts +++ b/packages/editor/src/services/editor.ts @@ -38,7 +38,7 @@ import { isFixed, setLayout, } from '../utils/editor'; -import { beforePaste, beforeRemove, getAddParent } from '../utils/operator'; +import { beforePaste, getAddParent } from '../utils/operator'; import BaseService from './BaseService'; import propsService from './props'; @@ -359,47 +359,62 @@ class Editor extends BaseService { return newNodes.length > 1 ? newNodes[0] : newNodes; } + public async doRemove(node: MNode): Promise { + const root = this.get('root'); + + if (!root) throw new Error('没有root'); + + const { parent, node: curNode } = this.getNodeInfo(node.id); + + if (!parent || !curNode) throw new Error('找不要删除的节点'); + + const index = getNodeIndex(curNode, parent); + + if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点'); + + parent.items?.splice(index, 1); + const stage = this.get('stage'); + stage?.remove({ id: node.id, root: this.get('root') }); + + if (node.type === NodeType.PAGE) { + this.state.pageLength -= 1; + + if (root.items[0]) { + await this.select(root.items[0]); + stage?.select(root.items[0].id); + } else { + this.set('node', null); + this.set('parent', null); + this.set('page', null); + this.set('stage', null); + this.set('highlightNode', null); + this.resetModifiedNodeId(); + historyService.reset(); + + return; + } + } else { + await this.select(parent); + stage?.select(parent.id); + } + + this.addModifiedNodeId(parent.id); + } + /** * 删除组件 * @param {Object} node * @return {Object} 删除的组件配置 */ - public async remove(nodeOrNodeList: MNode | MNode[]): Promise { - if (Array.isArray(nodeOrNodeList)) { - // 多选批量删除 - const nodes = nodeOrNodeList; - return this.multiRemove(nodes); - } - const node = nodeOrNodeList; - const removeParent = await beforeRemove(node); - // 删除的是页面 - if (!removeParent) return node; + public async remove(nodeOrNodeList: MNode | MNode[]): Promise { + const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList]; + + await Promise.all(nodes.map((node) => this.doRemove(node))); + // 更新历史记录 - this.addModifiedNodeId(removeParent.id); this.pushHistoryState(); - this.emit('remove', node); - - return node; - } - - /** - * 批量删除 - * @param nodes 批量删除的节点 - * @returns 批量删除的节点 - */ - public async multiRemove(nodes: MNode[]): Promise { - await Promise.all( - nodes.map(async (removeNode) => { - await beforeRemove(removeNode); - }), - ); - const nodeIds = nodes.map((node) => node.id); - this.addModifiedNodeId(nodeIds.join('-')); - this.pushHistoryState(); - - this.emit('multiRemove', nodes); - return nodes; + this.emit('remove'); } /** diff --git a/packages/editor/src/utils/operator.ts b/packages/editor/src/utils/operator.ts index efde3712..69a75c52 100644 --- a/packages/editor/src/utils/operator.ts +++ b/packages/editor/src/utils/operator.ts @@ -1,15 +1,14 @@ import { toRaw } from 'vue'; -import { cloneDeep, isEmpty } from 'lodash-es'; +import { isEmpty } from 'lodash-es'; -import { Id, MApp, MContainer, MNode, NodeType } from '@tmagic/schema'; +import { Id, MApp, MContainer, MNode } from '@tmagic/schema'; import StageCore from '@tmagic/stage'; import { isPage } from '@tmagic/utils'; import editorService from '../services/editor'; -import historyService from '../services/history'; import propsService from '../services/props'; import { AddMNode, PastePosition } from '../type'; -import { generatePageNameByApp, getInitPositionStyle, getNodeIndex } from '../utils/editor'; +import { generatePageNameByApp, getInitPositionStyle } from '../utils/editor'; /** * 粘贴前置操作:返回分配了新id以及校准了坐标的配置 @@ -87,59 +86,6 @@ export const getPositionInContainer = (position: PastePosition = {}, id: Id) => }; }; -/** - * 删除前置操作:实现了在编辑器中删除元素节点,并返回父级元素信息以供stage更新 - * @param node 待删除的节点 - * @returns 父级元素,root根元素 - */ -export const beforeRemove = async (node: MNode): Promise => { - if (!node?.id) return; - - const stage = editorService.get('stage'); - const root = editorService.get('root'); - - if (!root) throw new Error('没有root'); - - const { parent, node: curNode } = editorService.getNodeInfo(node.id, false); - - if (!parent || !curNode) throw new Error('找不要删除的节点'); - - const index = getNodeIndex(curNode, parent); - - if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点'); - // 从配置中删除元素 - parent.items?.splice(index, 1); - - // 通知stage更新 - stage?.remove({ id: node.id, root: cloneDeep(root) }); - - if (node.type === NodeType.PAGE) { - editorService.state.pageLength -= 1; - - if (root.items[0]) { - await editorService.select(root.items[0]); - stage?.select(root.items[0].id); - } else { - editorService.set('node', null); - editorService.set('nodes', []); - editorService.set('parent', null); - editorService.set('page', null); - editorService.set('stage', null); - editorService.set('highlightNode', null); - editorService.resetModifiedNodeId(); - historyService.reset(); - - editorService.emit('remove', node); - - return; - } - } else { - await editorService.select(parent); - stage?.select(parent.id); - } - return parent; -}; - export const getAddParent = (addNode: AddMNode | MNode[]) => { const curNode = editorService.get('node');