feat(editor): 多选菜单支持复制粘贴删除 #217
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
jia000
reviewed
Aug 1, 2022
| const services = inject<Services>('services'); | ||
| const stageOptions = inject<StageOptions>('stageOptions'); | ||
|
|
||
| const stageWrap = ref<InstanceType<typeof ScrollViewer>>(); | ||
| const stageContainer = ref<HTMLDivElement>(); | ||
| const menu = ref<InstanceType<typeof ViewerMenu>>(); | ||
| const isMultiSelect = ref<Boolean>(false); |
There was a problem hiding this comment.
Suggested change
| const isMultiSelect = ref<Boolean>(false); | |
| const isMultiSelect = computed(() => editorService.get('node').length >1); |
| @@ -131,6 +132,10 @@ export default defineComponent({ | |||
| services?.editorService.highlight(el.id); | |||
| }); | |||
|
|
|||
| stage?.on('multiSelect', (els: HTMLElement[]) => { | |||
| services?.editorService.multiSelect(els); | |||
There was a problem hiding this comment.
multiSelect的参数改成string[]
Suggested change
| services?.editorService.multiSelect(els); | |
| services?.editorService.multiSelect(els.map(el => el.id)); |
| const services = inject<Services>('services'); | ||
| const editorService = services?.editorService; | ||
| const menu = ref<InstanceType<typeof ContentMenu>>(); | ||
| const canPaste = ref(false); | ||
| const canCenter = ref(false); | ||
|
|
||
| const node = computed(() => editorService?.get('node')); | ||
| const selectedNodes = computed(() => editorService?.get('selectedNodes') || []); |
| @@ -83,7 +83,7 @@ class Editor extends BaseService { | |||
|
|
|||
| /** | |||
| * 设置当前指点节点配置 | |||
| * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | |||
| * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'selectedNodes' | |||
There was a problem hiding this comment.
selectedNodes改成nodes，set nodes的时候将node设置成nodes的第一个元素
| * @param config 指定节点配置或者ID | ||
| * @returns 加入多选的节点配置 | ||
| */ | ||
| public multiSelect(config: HTMLElement[]): void { |
| config.forEach((element) => { | ||
| const { node } = this.selectedConfigExceptionHandler(element.id); | ||
| if (!node) return; | ||
| const isExist = selectedNodes.find((selectedNode) => selectedNode.id === node.id); |
| public async copy(config: MNode): Promise<void> { | ||
| globalThis.localStorage.setItem(COPY_STORAGE_KEY, serialize(config)); | ||
| public async copy(config: MNode | MNode[]): Promise<void> { | ||
| if (Array.isArray(config)) { |
packages/editor/src/type.ts
Outdated
| @@ -64,6 +64,7 @@ export interface StoreState { | |||
| parent: MContainer | null; | |||
| node: MNode | null; | |||
| highlightNode: MNode | null; | |||
| selectedNodes: MNode[] | null; | |||
added 3 commits
August 2, 2022 15:19
jia000
reviewed
Aug 2, 2022
| if (!node) return; | ||
| nodes.push(node); | ||
| }); | ||
| this.set('nodes', uniq(nodes)); |
| * @param config 指定节点配置或者ID | ||
| * @returns 加入多选的节点配置 | ||
| */ | ||
| public multiSelect(config: Id[]): void { |
| @@ -273,7 +292,7 @@ class Editor extends BaseService { | |||
| public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> { | |||
| // 加入inputEvent是为给业务扩展时可以获取到更多的信息，只有在使用拖拽添加组件时才有改对象 | |||
| const { type, inputEvent, ...config } = addNode; | |||
| const curNode = this.get<MContainer>('node'); | |||
| const curNode = this.get<MContainer>('nodes')[0]; | |||
| return node; | ||
| public async remove(nodes: MNode | MNode[]): Promise<(MNode | void)[]> { | ||
| const removeNodes = Array.isArray(nodes) ? nodes : [nodes]; | ||
| return Promise.all(removeNodes.map(async (node) => await this.doRemove(node))); |
There was a problem hiding this comment.
这里不需要async，也不需要await
Suggested change
| return Promise.all(removeNodes.map(async (node) => await this.doRemove(node))); | |
| return Promise.all(removeNodes.map((node) => this.doRemove(node))); |
| const configStr = globalThis.localStorage.getItem(COPY_STORAGE_KEY); | ||
| const curNode = this.get<MContainer>('nodes')[0]; |
jia000
approved these changes
Aug 3, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
1、多选右键菜单支持复制粘贴删除
2、编辑器选中节点统一为nodes数组,保留原node对象为nodes数组的第一个元素
3、将复制粘贴删除行为封装到editorservice中
4、支持键盘快捷键操作
5、将复制粘贴操作拆分后进一步封装