mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-05-30 03:49:22 +08:00
feat(editor): 右键菜单兼容页面片
This commit is contained in:
parent
7b6dcedfad
commit
41a3b8c7c7
@ -6,7 +6,7 @@
|
|||||||
import { computed, inject, markRaw, ref } from 'vue';
|
import { computed, inject, markRaw, ref } from 'vue';
|
||||||
import { Files, Plus } from '@element-plus/icons-vue';
|
import { Files, Plus } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
import { isPage } from '@tmagic/utils';
|
import { isPage, isPageFragment } from '@tmagic/utils';
|
||||||
|
|
||||||
import ContentMenu from '@editor/components/ContentMenu.vue';
|
import ContentMenu from '@editor/components/ContentMenu.vue';
|
||||||
import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
|
import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
|
||||||
@ -96,7 +96,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
|||||||
type: 'button',
|
type: 'button',
|
||||||
text: '全部折叠',
|
text: '全部折叠',
|
||||||
icon: FolderMinusIcon,
|
icon: FolderMinusIcon,
|
||||||
display: () => isPage(node.value),
|
display: () => isPage(node.value) || isPageFragment(node.value),
|
||||||
handler: () => {
|
handler: () => {
|
||||||
emit('collapse-all');
|
emit('collapse-all');
|
||||||
},
|
},
|
||||||
|
@ -7,7 +7,7 @@ import { computed, inject, markRaw, ref, watch } from 'vue';
|
|||||||
import { Bottom, Top } from '@element-plus/icons-vue';
|
import { Bottom, Top } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
import { NodeType } from '@tmagic/schema';
|
import { NodeType } from '@tmagic/schema';
|
||||||
import { isPage } from '@tmagic/utils';
|
import { isPage, isPageFragment } from '@tmagic/utils';
|
||||||
|
|
||||||
import ContentMenu from '@editor/components/ContentMenu.vue';
|
import ContentMenu from '@editor/components/ContentMenu.vue';
|
||||||
import CenterIcon from '@editor/icons/CenterIcon.vue';
|
import CenterIcon from '@editor/icons/CenterIcon.vue';
|
||||||
@ -60,14 +60,14 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
|||||||
direction: 'horizontal',
|
direction: 'horizontal',
|
||||||
display: () => {
|
display: () => {
|
||||||
if (!node.value) return false;
|
if (!node.value) return false;
|
||||||
return !isPage(node.value);
|
return !isPage(node.value) && !isPageFragment(node.value);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
text: '上移一层',
|
text: '上移一层',
|
||||||
icon: markRaw(Top),
|
icon: markRaw(Top),
|
||||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
|
||||||
handler: () => {
|
handler: () => {
|
||||||
editorService?.moveLayer(1);
|
editorService?.moveLayer(1);
|
||||||
},
|
},
|
||||||
@ -76,7 +76,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
|||||||
type: 'button',
|
type: 'button',
|
||||||
text: '下移一层',
|
text: '下移一层',
|
||||||
icon: markRaw(Bottom),
|
icon: markRaw(Bottom),
|
||||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
|
||||||
handler: () => {
|
handler: () => {
|
||||||
editorService?.moveLayer(-1);
|
editorService?.moveLayer(-1);
|
||||||
},
|
},
|
||||||
@ -85,7 +85,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
|||||||
type: 'button',
|
type: 'button',
|
||||||
text: '置顶',
|
text: '置顶',
|
||||||
icon: markRaw(Top),
|
icon: markRaw(Top),
|
||||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
|
||||||
handler: () => {
|
handler: () => {
|
||||||
editorService?.moveLayer(LayerOffset.TOP);
|
editorService?.moveLayer(LayerOffset.TOP);
|
||||||
},
|
},
|
||||||
@ -94,7 +94,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
|||||||
type: 'button',
|
type: 'button',
|
||||||
text: '置底',
|
text: '置底',
|
||||||
icon: markRaw(Bottom),
|
icon: markRaw(Bottom),
|
||||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
|
||||||
handler: () => {
|
handler: () => {
|
||||||
editorService?.moveLayer(LayerOffset.BOTTOM);
|
editorService?.moveLayer(LayerOffset.BOTTOM);
|
||||||
},
|
},
|
||||||
@ -103,7 +103,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
|||||||
{
|
{
|
||||||
type: 'divider',
|
type: 'divider',
|
||||||
direction: 'horizontal',
|
direction: 'horizontal',
|
||||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
|
||||||
},
|
},
|
||||||
useDeleteMenu(),
|
useDeleteMenu(),
|
||||||
{
|
{
|
||||||
|
@ -2,7 +2,7 @@ import { computed, markRaw, Ref } from 'vue';
|
|||||||
import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
|
import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
import { Id, MContainer, NodeType } from '@tmagic/schema';
|
import { Id, MContainer, NodeType } from '@tmagic/schema';
|
||||||
import { isPage } from '@tmagic/utils';
|
import { isPage, isPageFragment } from '@tmagic/utils';
|
||||||
|
|
||||||
import ContentMenu from '@editor/components/ContentMenu.vue';
|
import ContentMenu from '@editor/components/ContentMenu.vue';
|
||||||
import type { MenuButton, Services } from '@editor/type';
|
import type { MenuButton, Services } from '@editor/type';
|
||||||
@ -15,7 +15,7 @@ export const useDeleteMenu = (): MenuButton => ({
|
|||||||
icon: Delete,
|
icon: Delete,
|
||||||
display: (services) => {
|
display: (services) => {
|
||||||
const node = services?.editorService?.get('node');
|
const node = services?.editorService?.get('node');
|
||||||
return node?.type !== NodeType.ROOT && !isPage(node);
|
return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
|
||||||
},
|
},
|
||||||
handler: (services) => {
|
handler: (services) => {
|
||||||
const nodes = services?.editorService?.get('nodes');
|
const nodes = services?.editorService?.get('nodes');
|
||||||
|
Loading…
x
Reference in New Issue
Block a user