mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-17 10:35:11 +08:00
feat(editor): 新增自定义右键菜单函数配置
This commit is contained in:
roymondchen
parent
4ec0b69a8d
commit
698c3451ff
@ -16,7 +16,7 @@
|
||||
|
||||
<template #sidebar>
|
||||
<slot name="sidebar" :editorService="editorService">
|
||||
<Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
|
||||
<Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
|
||||
<template #layer-panel-header>
|
||||
<slot name="layer-panel-header"></slot>
|
||||
</template>
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
<template #workspace>
|
||||
<slot name="workspace" :editorService="editorService">
|
||||
<Workspace :stage-content-menu="stageContentMenu">
|
||||
<Workspace :stage-content-menu="stageContentMenu" :custom-content-menu="customContentMenu">
|
||||
<template #stage><slot name="stage"></slot></template>
|
||||
<template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
|
||||
<template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
|
||||
|
||||
@ -74,6 +74,7 @@ export interface EditorProps {
|
||||
collectorOptions?: CustomTargetOptions;
|
||||
guidesOptions?: Partial<GuidesOptions>;
|
||||
disabledMultiSelect?: boolean;
|
||||
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
|
||||
}
|
||||
|
||||
export const defaultEditorProps = {
|
||||
|
||||
@ -160,6 +160,7 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
data: SideBarData;
|
||||
layerContentMenu: (MenuButton | MenuComponent)[];
|
||||
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
|
||||
}>(),
|
||||
{
|
||||
data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
|
||||
@ -187,6 +188,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
|
||||
text: '已选组件',
|
||||
props: {
|
||||
layerContentMenu: props.layerContentMenu,
|
||||
customContentMenu: props.customContentMenu,
|
||||
},
|
||||
component: LayerPanel,
|
||||
slots: {},
|
||||
|
||||
@ -17,9 +17,16 @@ defineOptions({
|
||||
name: 'MEditorLayerMenu',
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
layerContentMenu: (MenuButton | MenuComponent)[];
|
||||
}>();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
layerContentMenu: (MenuButton | MenuComponent)[];
|
||||
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
|
||||
}>(),
|
||||
{
|
||||
layerContentMenu: () => [],
|
||||
customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
'collapse-all': [];
|
||||
@ -82,29 +89,34 @@ const getSubMenuData = computed<MenuButton[]>(() => {
|
||||
return [];
|
||||
});
|
||||
|
||||
const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
|
||||
{
|
||||
type: 'button',
|
||||
text: '全部折叠',
|
||||
icon: FolderMinusIcon,
|
||||
display: () => isPage(node.value),
|
||||
handler: () => {
|
||||
emit('collapse-all');
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '新增',
|
||||
icon: markRaw(Plus),
|
||||
display: () => node.value?.items && nodes.value?.length === 1,
|
||||
items: getSubMenuData.value,
|
||||
},
|
||||
useCopyMenu(),
|
||||
usePasteMenu(),
|
||||
useDeleteMenu(),
|
||||
useMoveToMenu(services),
|
||||
...props.layerContentMenu,
|
||||
]);
|
||||
const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
||||
props.customContentMenu(
|
||||
[
|
||||
{
|
||||
type: 'button',
|
||||
text: '全部折叠',
|
||||
icon: FolderMinusIcon,
|
||||
display: () => isPage(node.value),
|
||||
handler: () => {
|
||||
emit('collapse-all');
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '新增',
|
||||
icon: markRaw(Plus),
|
||||
display: () => node.value?.items && nodes.value?.length === 1,
|
||||
items: getSubMenuData.value,
|
||||
},
|
||||
useCopyMenu(),
|
||||
usePasteMenu(),
|
||||
useDeleteMenu(),
|
||||
useMoveToMenu(services),
|
||||
...props.layerContentMenu,
|
||||
],
|
||||
'layer',
|
||||
),
|
||||
);
|
||||
|
||||
const show = (e: MouseEvent) => {
|
||||
menu.value?.show(e);
|
||||
|
||||
@ -34,7 +34,12 @@
|
||||
</Tree>
|
||||
|
||||
<Teleport to="body">
|
||||
<LayerMenu ref="menu" :layer-content-menu="layerContentMenu" @collapse-all="collapseAllHandler"></LayerMenu>
|
||||
<LayerMenu
|
||||
ref="menu"
|
||||
:layer-content-menu="layerContentMenu"
|
||||
:custom-content-menu="customContentMenu"
|
||||
@collapse-all="collapseAllHandler"
|
||||
></LayerMenu>
|
||||
</Teleport>
|
||||
</TMagicScrollbar>
|
||||
</template>
|
||||
@ -65,6 +70,7 @@ defineOptions({
|
||||
|
||||
defineProps<{
|
||||
layerContentMenu: (MenuButton | MenuComponent)[];
|
||||
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
|
||||
}>();
|
||||
|
||||
const services = inject<Services>('services');
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
<Breadcrumb></Breadcrumb>
|
||||
|
||||
<slot name="stage">
|
||||
<MagicStage v-if="page" :stage-content-menu="stageContentMenu"></MagicStage>
|
||||
<MagicStage
|
||||
v-if="page"
|
||||
:stage-content-menu="stageContentMenu"
|
||||
:custom-content-menu="customContentMenu"
|
||||
></MagicStage>
|
||||
</slot>
|
||||
|
||||
<slot name="workspace-content"></slot>
|
||||
@ -32,6 +36,7 @@ defineOptions({
|
||||
|
||||
defineProps<{
|
||||
stageContentMenu: (MenuButton | MenuComponent)[];
|
||||
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
|
||||
}>();
|
||||
|
||||
const services = inject<Services>('services');
|
||||
|
||||
@ -25,7 +25,12 @@
|
||||
<NodeListMenu></NodeListMenu>
|
||||
|
||||
<Teleport to="body">
|
||||
<ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
|
||||
<ViewerMenu
|
||||
ref="menu"
|
||||
:is-multi-select="isMultiSelect"
|
||||
:stage-content-menu="stageContentMenu"
|
||||
:custom-content-menu="customContentMenu"
|
||||
></ViewerMenu>
|
||||
</Teleport>
|
||||
</ScrollViewer>
|
||||
</template>
|
||||
@ -52,6 +57,7 @@ defineOptions({
|
||||
|
||||
defineProps<{
|
||||
stageContentMenu: (MenuButton | MenuComponent)[];
|
||||
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
|
||||
}>();
|
||||
|
||||
let stage: StageCore | null = null;
|
||||
|
||||
@ -19,8 +19,16 @@ defineOptions({
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
|
||||
{ isMultiSelect: false },
|
||||
defineProps<{
|
||||
isMultiSelect?: boolean;
|
||||
stageContentMenu: (MenuButton | MenuComponent)[];
|
||||
customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
|
||||
}>(),
|
||||
{
|
||||
isMultiSelect: false,
|
||||
stageContentMenu: () => [],
|
||||
customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
|
||||
},
|
||||
);
|
||||
|
||||
const services = inject<Services>('services');
|
||||
@ -32,83 +40,88 @@ const node = computed(() => editorService?.get('node'));
|
||||
const nodes = computed(() => editorService?.get('nodes'));
|
||||
const parent = computed(() => editorService?.get('parent'));
|
||||
|
||||
const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
|
||||
{
|
||||
type: 'button',
|
||||
text: '水平居中',
|
||||
icon: markRaw(CenterIcon),
|
||||
display: () => canCenter.value,
|
||||
handler: () => {
|
||||
if (!nodes.value) return;
|
||||
editorService?.alignCenter(nodes.value);
|
||||
},
|
||||
},
|
||||
useCopyMenu(),
|
||||
usePasteMenu(menu),
|
||||
{
|
||||
type: 'divider',
|
||||
direction: 'horizontal',
|
||||
display: () => {
|
||||
if (!node.value) return false;
|
||||
return !isPage(node.value);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '上移一层',
|
||||
icon: markRaw(Top),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(1);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '下移一层',
|
||||
icon: markRaw(Bottom),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(-1);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '置顶',
|
||||
icon: markRaw(Top),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(LayerOffset.TOP);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '置底',
|
||||
icon: markRaw(Bottom),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(LayerOffset.BOTTOM);
|
||||
},
|
||||
},
|
||||
useMoveToMenu(services),
|
||||
{
|
||||
type: 'divider',
|
||||
direction: 'horizontal',
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
},
|
||||
useDeleteMenu(),
|
||||
{
|
||||
type: 'divider',
|
||||
direction: 'horizontal',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '清空参考线',
|
||||
handler: () => {
|
||||
editorService?.get('stage')?.clearGuides();
|
||||
},
|
||||
},
|
||||
...props.stageContentMenu,
|
||||
]);
|
||||
const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
|
||||
props.customContentMenu(
|
||||
[
|
||||
{
|
||||
type: 'button',
|
||||
text: '水平居中',
|
||||
icon: markRaw(CenterIcon),
|
||||
display: () => canCenter.value,
|
||||
handler: () => {
|
||||
if (!nodes.value) return;
|
||||
editorService?.alignCenter(nodes.value);
|
||||
},
|
||||
},
|
||||
useCopyMenu(),
|
||||
usePasteMenu(menu),
|
||||
{
|
||||
type: 'divider',
|
||||
direction: 'horizontal',
|
||||
display: () => {
|
||||
if (!node.value) return false;
|
||||
return !isPage(node.value);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '上移一层',
|
||||
icon: markRaw(Top),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(1);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '下移一层',
|
||||
icon: markRaw(Bottom),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(-1);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '置顶',
|
||||
icon: markRaw(Top),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(LayerOffset.TOP);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '置底',
|
||||
icon: markRaw(Bottom),
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
handler: () => {
|
||||
editorService?.moveLayer(LayerOffset.BOTTOM);
|
||||
},
|
||||
},
|
||||
useMoveToMenu(services),
|
||||
{
|
||||
type: 'divider',
|
||||
direction: 'horizontal',
|
||||
display: () => !isPage(node.value) && !props.isMultiSelect,
|
||||
},
|
||||
useDeleteMenu(),
|
||||
{
|
||||
type: 'divider',
|
||||
direction: 'horizontal',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: '清空参考线',
|
||||
handler: () => {
|
||||
editorService?.get('stage')?.clearGuides();
|
||||
},
|
||||
},
|
||||
...props.stageContentMenu,
|
||||
],
|
||||
'viewer',
|
||||
),
|
||||
);
|
||||
|
||||
watch(
|
||||
parent,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user