feat(脑图): 脑图基础组件支持快捷键&测试计划和功能用例脑图快捷键拦截

This commit is contained in:
baiqi 2024-07-30 18:02:59 +08:00 committed by Craftsman
parent b9128515e1
commit cbd069ca0a
22 changed files with 452 additions and 994 deletions

View File

@ -432,7 +432,10 @@ export default function useMinderBaseApi({ hasEditPermission }: { hasEditPermiss
} else if (node.data?.resource?.includes(prerequisiteTag) && (!node.children || node.children.length === 0)) {
// 当前节点是前置操作,则默认添加一个文本节点
execInert('AppendChildNode');
} else {
} else if (
(!node.data?.resource || node.data?.resource?.length === 0) &&
(!node.parent?.data?.resource || node.parent?.data?.resource?.length === 0)
) {
// 文本节点下可添加文本节点
execInert('AppendChildNode');
}

View File

@ -373,6 +373,12 @@
* @param value 插入值
*/
function insertNode(node: PlanMinderNode, type: string) {
if (
(node.data?.level === 2 && type === 'AppendChildNode') ||
(node.data?.level === 1 && type === 'AppendSiblingNode')
) {
return;
}
let child: PlanMinderNodeData | undefined;
//
const caseCountNodeData = {
@ -633,6 +639,15 @@
}
);
watch(
() => minderStore.event.eventId,
() => {
if ([MinderEventName.EXPAND, MinderEventName.COLLAPSE].includes(minderStore.event.name)) {
setCustomPriorityView(priorityTextMap);
}
}
);
function handleConfigCancel() {
clearSelectedCases();
extraVisible.value = false;

View File

@ -0,0 +1,237 @@
import useMinderStore from '@/store/modules/components/minder-editor';
import { getGenerateId } from '@/utils';
import { MinderEventName } from '@/enums/minderEnum';
import type { MinderJsonNode } from '../props';
import { markDeleteNode, resetNodes } from '../script/tool/utils';
interface IData {
getRegisterProtocol(protocol: string): {
encode: (nodes: Array<MinderJsonNode>) => Array<MinderJsonNode>;
decode: (nodes: Array<MinderJsonNode>) => Array<MinderJsonNode>;
};
}
export interface MinderOperationProps {
insertNode?: (node: MinderJsonNode, command: string, value?: string) => void;
canShowMoreMenuNodeOperation?: boolean;
canShowPasteMenu?: boolean;
}
export default function useMinderOperation({
insertNode,
canShowMoreMenuNodeOperation,
canShowPasteMenu,
}: MinderOperationProps) {
const minderStore = useMinderStore();
function encode(nodes: Array<MinderJsonNode>): string {
const { editor } = window;
const { minder, MimeType } = editor;
const Data: IData = window.kityminder.data;
const kmencode = MimeType.getMimeTypeProtocol('application/km');
const _nodes = [];
for (let i = 0, l = nodes.length; i < l; i++) {
// @ts-ignore
_nodes.push(minder.exportNode(nodes[i]));
}
return kmencode(Data.getRegisterProtocol('json').encode(_nodes));
}
/**
*
*/
const minderCopy = (e?: ClipboardEvent) => {
if (!canShowMoreMenuNodeOperation) {
return;
}
const { editor } = window;
const { minder, fsm } = editor;
const state = fsm.state();
switch (state) {
case 'input': {
break;
}
case 'normal': {
const selectedNodes = minder.getSelectedNodes();
minderStore.dispatchEvent(MinderEventName.COPY_NODE, undefined, undefined, undefined, selectedNodes);
minder.execCommand('Copy');
e?.preventDefault();
break;
}
default:
}
};
/**
*
*/
const minderCut = (e?: ClipboardEvent) => {
if (!canShowMoreMenuNodeOperation) {
return;
}
const { editor } = window;
const { minder, fsm } = editor;
if (minder.getStatus() !== 'normal') {
e?.preventDefault();
return;
}
const state = fsm.state();
switch (state) {
case 'input': {
break;
}
case 'normal': {
markDeleteNode(minder);
const selectedNodes = minder.getSelectedNodes();
if (selectedNodes.length) {
e?.clipboardData?.setData('text/plain', encode(selectedNodes));
minder.execCommand('Cut');
}
e?.preventDefault();
minderStore.dispatchEvent(MinderEventName.CUT_NODE, undefined, undefined, undefined, selectedNodes);
break;
}
default:
}
};
/**
*
*/
const minderPaste = (e?: ClipboardEvent) => {
if (!canShowMoreMenuNodeOperation || !canShowPasteMenu) {
return;
}
const { editor } = window;
const { minder, fsm, MimeType } = editor;
const Data: IData = window.kityminder.data;
const { decode } = Data.getRegisterProtocol('json');
if (minder.getStatus() !== 'normal') {
e?.preventDefault();
return;
}
const state = fsm.state();
const textData = e?.clipboardData?.getData('text/plain');
switch (state) {
case 'input': {
// input状态下如果格式为application/km则不进行paste操作
if (!MimeType.isPureText(textData)) {
e?.preventDefault();
}
break;
}
case 'normal': {
/*
* normal状态下通过对选中节点粘贴导入子节点文本进行单独处理
*/
const sNodes = minder.getSelectedNodes();
const selectedNodes: MinderJsonNode[] = [];
minderStore.dispatchEvent(MinderEventName.PASTE_NODE, undefined, undefined, undefined, selectedNodes);
if (MimeType.whichMimeType(textData) === 'application/km') {
const nodes = decode(MimeType.getPureText(textData));
sNodes.forEach((node: MinderJsonNode) => {
const noFakeNodeTree = resetNodes(nodes); // 每次粘贴复制的节点集合到新的节点之前,都需要重置节点集合的信息
let _node;
// 由于粘贴逻辑中为了排除子节点重新排序导致逆序,因此复制的时候倒过来
for (let i = noFakeNodeTree.length - 1; i >= 0; i--) {
_node = minder.createNode(null, node);
minder.importNode(_node, noFakeNodeTree[i]);
selectedNodes.push(_node);
node.appendChild(_node);
}
});
window.minder.execCommand('Expand'); // 展开当前所有选中的节点,避免无子节点的节点在粘贴后还是折叠状态
minder.select(selectedNodes, true);
minder.refresh();
} else if (e?.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
const imageFile = e?.clipboardData.items[0].getAsFile();
const serverService = window.angular.element(document.body).injector().get('server');
return serverService.uploadImage(imageFile).then((json: Record<string, any>) => {
const resp = json.data;
if (resp.errno === 0) {
minder.execCommand('image', resp.data.url);
}
});
} else {
sNodes.forEach((node: MinderJsonNode) => {
minder.Text2Children(node, textData);
});
}
e?.preventDefault();
break;
}
default:
}
};
/**
*
* @param command
* @param value
*/
const execInsertCommand = (command: string, value?: string) => {
const node: MinderJsonNode = window.minder.getSelectedNode();
if (insertNode) {
insertNode(node, command, value);
return;
}
if (window.minder.queryCommandState(command) !== -1) {
window.minder.execCommand(command);
nextTick(() => {
const newNode: MinderJsonNode = window.minder.getSelectedNode();
if (!newNode.data) {
newNode.data = {
id: getGenerateId(),
text: '',
};
}
newNode.data.isNew = true; // 新建的节点标记为新建
});
}
};
/**
*
* @param selectedNodes
* @param value
*/
const appendChildNode = (selectedNodes: MinderJsonNode[], value?: string) => {
execInsertCommand('AppendChildNode', value);
minderStore.dispatchEvent(MinderEventName.INSERT_CHILD, value, undefined, undefined, selectedNodes);
};
/**
*
* @param selectedNodes
* @param value
*/
const appendSiblingNode = (selectedNodes: MinderJsonNode[], value?: string) => {
execInsertCommand('AppendSiblingNode', value);
minderStore.dispatchEvent(MinderEventName.INSERT_SIBLING, value, undefined, undefined, selectedNodes);
};
/**
*
* @param selectedNodes
*/
const minderDelete = (selectedNodes: MinderJsonNode[]) => {
minderStore.dispatchEvent(MinderEventName.DELETE_NODE, undefined, undefined, undefined, selectedNodes);
window.minder.execCommand('RemoveNode');
};
return {
minderCopy,
minderCut,
minderPaste,
appendChildNode,
appendSiblingNode,
minderDelete,
};
}

View File

@ -1 +1,70 @@
export default function useShortCut() {}
import useMinderOperation, { type MinderOperationProps } from './useMinderOperation';
type ShortcutKey = 'expand' | 'enter' | 'appendSiblingNode' | 'appendChildNode' | 'undo' | 'redo' | 'delete';
// 快捷键事件映射combinationShortcuts中定义了组合键事件key为组合键value为事件名称
type Shortcuts = {
[key in ShortcutKey]?: () => void;
};
export default function useShortCut(shortcuts: Shortcuts, options: MinderOperationProps) {
const { minderCopy, minderCut, minderPaste } = useMinderOperation(options);
const handleKeyDown = (event: KeyboardEvent) => {
const key = event.key.toLowerCase();
const isCtrlOrCmd = event.ctrlKey || event.metaKey;
// 定义组合键事件
const combinationShortcuts: { [key: string]: ShortcutKey } = {
z: 'undo', // 撤销
y: 'redo', // 重做
enter: 'enter', // 进入节点
};
// 定义单键事件
const singleShortcuts: { [key: string]: ShortcutKey } = {
'/': 'expand', // 展开/折叠
'enter': 'appendSiblingNode',
'tab': 'appendChildNode',
'backspace': 'delete',
};
if (isCtrlOrCmd && combinationShortcuts[key]) {
// 执行组合键事件
event.preventDefault();
const action = combinationShortcuts[key];
if (shortcuts[action]) {
shortcuts[action]!();
}
} else if (singleShortcuts[key]) {
// 执行单键事件
event.preventDefault();
const action = singleShortcuts[key];
if (shortcuts[action]) {
shortcuts[action]!();
}
}
};
onMounted(() => {
const minderContainer = document.querySelector('.ms-minder-container');
if (minderContainer) {
minderContainer.addEventListener('keydown', (e) => handleKeyDown(e as KeyboardEvent));
minderContainer.addEventListener('copy', (e) => minderCopy(e as ClipboardEvent));
minderContainer.addEventListener('cut', (e) => minderCut(e as ClipboardEvent));
minderContainer.addEventListener('paste', (e) => minderPaste(e as ClipboardEvent));
}
});
function unbindShortcuts() {
const minderContainer = document.querySelector('.ms-minder-container');
if (minderContainer) {
minderContainer.removeEventListener('keydown', (e) => handleKeyDown(e as KeyboardEvent));
minderContainer.removeEventListener('copy', (e) => minderCopy(e as ClipboardEvent));
minderContainer.removeEventListener('cut', (e) => minderCut(e as ClipboardEvent));
minderContainer.removeEventListener('paste', (e) => minderPaste(e as ClipboardEvent));
}
}
return {
unbindShortcuts,
};
}

View File

@ -50,7 +50,6 @@
editMenuProps,
floatMenuProps,
headerProps,
insertProps,
mainEditorProps,
MinderJson,
MinderJsonNode,
@ -66,7 +65,6 @@
...headerProps,
...floatMenuProps,
...editMenuProps,
...insertProps,
...mainEditorProps,
...tagProps,
...priorityProps,

View File

@ -39,7 +39,7 @@
<MsIcon type="icon-icon_aiming" class="text-[var(--color-text-4)]" />
</MsButton>
</a-tooltip>
<!-- <a-trigger
<a-trigger
:popup-translate="[5, -105]"
position="right"
class="ms-minder-shortcut-trigger"
@ -87,16 +87,16 @@
<div class="ms-minder-shortcut-trigger-listitem">
<div>{{ t('minder.hotboxMenu.insetSon') }}</div>
<div class="ms-minder-shortcut-trigger-listitem-icon ms-minder-shortcut-trigger-listitem-icon-auto">
Shift+Tab
Tab
</div>
</div>
<div class="ms-minder-shortcut-trigger-listitem">
<div>{{ t('minder.main.history.undo') }}</div>
<div>{{ t('minder.hotboxMenu.cut') }}</div>
<div class="flex items-center gap-[4px]">
<div class="ms-minder-shortcut-trigger-listitem-icon">
<icon-command :size="14" />
</div>
<div class="ms-minder-shortcut-trigger-listitem-icon">Z</div>
<div class="ms-minder-shortcut-trigger-listitem-icon">X</div>
</div>
</div>
<div class="ms-minder-shortcut-trigger-listitem">
@ -111,12 +111,12 @@
</div>
</div>
<div class="ms-minder-shortcut-trigger-listitem">
<div>{{ t('minder.main.history.redo') }}</div>
<div>{{ t('minder.main.history.undo') }}</div>
<div class="flex items-center gap-[4px]">
<div class="ms-minder-shortcut-trigger-listitem-icon">
<icon-command :size="14" />
</div>
<div class="ms-minder-shortcut-trigger-listitem-icon">Y</div>
<div class="ms-minder-shortcut-trigger-listitem-icon">Z</div>
</div>
</div>
<div class="ms-minder-shortcut-trigger-listitem">
@ -125,9 +125,18 @@
<MsIcon type="icon-icon_carriage_return1" />
</div>
</div>
<div class="ms-minder-shortcut-trigger-listitem">
<div>{{ t('minder.main.history.redo') }}</div>
<div class="flex items-center gap-[4px]">
<div class="ms-minder-shortcut-trigger-listitem-icon">
<icon-command :size="14" />
</div>
<div class="ms-minder-shortcut-trigger-listitem-icon">Y</div>
</div>
</div>
</div>
</template>
</a-trigger> -->
</a-trigger>
</div>
<div v-show="isNavOpen" ref="navPreviewer" class="ms-minder-navigator-previewer" />
</div>
@ -325,7 +334,7 @@
});
}
// const shortcutTriggerVisible = ref(false);
const shortcutTriggerVisible = ref(false);
onMounted(() => {
nextTick(() => {

View File

@ -1,73 +0,0 @@
<template>
<div class="menu-item">
<a-button
class="arco-btn-outline--secondary mb-[4px]"
:disabled="removeNodeDisabled"
type="outline"
size="small"
@click="del"
>
<template #icon>
<icon-minus />
</template>
</a-button>
{{ t('minder.commons.delete') }}
</div>
</template>
<script lang="ts" name="edit_del" setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import useMinderStore from '@/store/modules/components/minder-editor';
import { MinderNodePosition } from '@/store/modules/components/minder-editor/types';
import { MinderEventName } from '@/enums/minderEnum';
import { delProps, MinderJsonNode } from '../../props';
import { isDeleteDisableNode } from '../../script/tool/utils';
const minderStore = useMinderStore();
const { t } = useI18n();
const props = defineProps(delProps);
let minder = reactive<any>({});
const removeNodeDisabled = ref(true);
function checkDisabled() {
try {
if (!minder) return false;
} catch (e) {
// windowminderundefined
return false;
}
const node = minder.getSelectedNode();
removeNodeDisabled.value = !node || !!isDeleteDisableNode(minder) || node.parent === null;
}
onMounted(() => {
nextTick(() => {
minder = window.minder;
minder.on('selectionchange', () => {
checkDisabled();
});
});
});
function del() {
if (removeNodeDisabled.value || !minder.queryCommandState || !minder.execCommand) {
return;
}
const nodes: MinderJsonNode[] = minder.getSelectedNodes();
if (nodes.length > 0) {
if (props.delConfirm) {
props.delConfirm(nodes);
return;
}
const box = nodes[0].getRenderBox();
minderStore.dispatchEvent(MinderEventName.DELETE_NODE, undefined, box, nodes[0].rc.node, nodes);
}
minder.forceRemoveNode();
}
</script>

View File

@ -1,117 +0,0 @@
<template>
<div class="menu-container">
<div class="menu-group">
<div class="menu-item">
<a-button class="arco-btn-outline--secondary mb-[4px]" type="outline" size="small" @click="expand">
<template #icon>
<icon-plus />
</template>
</a-button>
{{ t('minder.menu.expand.expand') }}
</div>
<div class="menu-item">
<a-button class="arco-btn-outline--secondary mb-[4px]" type="outline" size="small" @click="folding">
<template #icon>
<icon-minus />
</template>
</a-button>
{{ t('minder.menu.expand.folding') }}
</div>
<move-box :move-enable="props.moveEnable" :move-confirm="props.moveConfirm" />
<insert-box :insert-node="props.insertNode" />
<edit-del :del-confirm="props.delConfirm" />
</div>
<tag-box
v-if="props.tagEnable"
:tags="props.tags"
:tag-disable-check="props.tagDisableCheck"
:tag-edit-check="props.tagEditCheck"
:distinct-tags="props.distinctTags"
:replaceable-tags="props.replaceableTags"
:single-tag="props.singleTag"
:after-tag-edit="props.afterTagEdit"
/>
<div class="menu-group">
<sequence-box
v-if="props.sequenceEnable"
:priority-prefix="props.priorityPrefix"
:priority-count="props.priorityCount"
:priority-disable-check="props.priorityDisableCheck"
:priority-start-with-zero="props.priorityStartWithZero"
/>
</div>
<div class="menu-group">
<mold v-if="props.moldEnable" :default-mold="props.defaultMold" @mold-change="handleMoldChange" />
</div>
</div>
</template>
<script lang="ts" name="editMenu" setup>
import mold from '../view/mold.vue';
import editDel from './editDel.vue';
import insertBox from './insertBox.vue';
import moveBox from './moveBox.vue';
import sequenceBox from './sequenceBox.vue';
import TagBox from './tagBox.vue';
import { useI18n } from '@/hooks/useI18n';
import { delProps, editMenuProps, insertProps, moleProps, priorityProps, tagProps, viewMenuProps } from '../../props';
const props = defineProps({
...editMenuProps,
...insertProps,
...priorityProps,
...tagProps,
...delProps,
...viewMenuProps,
...moleProps,
});
const emit = defineEmits<{
(e: 'moldChange', data: number): void;
}>();
const { t } = useI18n();
const hasSelectedNode = ref(false);
let minder = reactive<any>({});
onMounted(() => {
nextTick(() => {
minder = window.minder;
if (minder.on) {
minder.on('selectionchange', () => {
hasSelectedNode.value = Object.keys(minder).length > 0 && minder.getSelectedNode();
});
}
});
});
/**
* 展开
*/
function expand() {
const state = window.minder?.queryCommandState('Expand');
if (state === 0) {
//
window.minder?.execCommand('Expand');
} else {
window.minder?.execCommand('ExpandToLevel', 999);
}
}
/**
* 收起
*/
function folding() {
if (hasSelectedNode.value) {
window.minder?.execCommand('Collapse');
} else {
window.minder?.execCommand('ExpandToLevel', 1);
}
}
function handleMoldChange(data: number) {
emit('moldChange', data);
}
</script>

View File

@ -1,22 +0,0 @@
<template>
<div class="expand-group">
<a-button class="tab-icons expand" type="text" @click="expand" />
{{ t('minder.menu.expand.expand') }}
</div>
</template>
<script lang="ts" name="expand" setup>
import { useI18n } from '@/hooks/useI18n';
const { t } = useI18n();
function expand() {
window.minder?.execCommand('Expand', 9999);
}
</script>
<style lang="less" scoped>
.dropdown-link {
@apply cursor-pointer;
}
</style>

View File

@ -1,91 +0,0 @@
<template>
<div class="menu-item">
<a-dropdown @select="handleCommand">
<a-button
class="arco-btn-outline--secondary mb-[4px]"
:disabled="appendChildNodeDisabled && appendParentNodeDisabled && appendSiblingNodeDisabled"
type="outline"
size="small"
>
<template #icon>
<icon-plus />
</template>
</a-button>
<template #content>
<a-doption :disabled="appendChildNodeDisabled" value="down">{{ t('minder.menu.insert.down') }}</a-doption>
<a-doption :disabled="appendParentNodeDisabled" value="up">{{ t('minder.menu.insert.up') }}</a-doption>
<a-doption :disabled="appendSiblingNodeDisabled" value="same">{{ t('minder.menu.insert.same') }}</a-doption>
</template>
</a-dropdown>
{{ t('minder.menu.insert.insert') }}
</div>
</template>
<script lang="ts" name="insertBox" setup>
import { nextTick, onMounted, ref } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import { insertProps, MinderJsonNode } from '../../props';
import { isDisableNode } from '../../script/tool/utils';
const props = defineProps({
...insertProps,
});
const { t } = useI18n();
const minder = ref<any>({});
const appendChildNodeDisabled = ref(false);
const appendParentNodeDisabled = ref(false);
const appendSiblingNodeDisabled = ref(false);
function checkDisabled() {
try {
if (Object.keys(minder.value).length === 0) return false;
} catch (e) {
// windowminderundefined
return false;
}
appendChildNodeDisabled.value = minder.value.queryCommandState('AppendChildNode') === -1;
const node = minder.value.getSelectedNode();
appendSiblingNodeDisabled.value = !node || !!isDisableNode(minder.value) || node.parent === null;
appendParentNodeDisabled.value = !node || node.parent === null;
}
onMounted(() => {
nextTick(() => {
minder.value = window.minder;
minder.value.on('selectionchange', () => {
checkDisabled();
});
});
});
function execCommand(command: string) {
const node: MinderJsonNode = minder.value.getSelectedNode();
if (props.insertNode) {
props.insertNode(node, command);
return;
}
if (minder.value.queryCommandState(command) !== -1) {
minder.value.execCommand(command);
}
}
function handleCommand(val: string | number | Record<string, any> | undefined) {
switch (val) {
case 'down':
execCommand('AppendChildNode');
break;
case 'up':
execCommand('AppendParentNode');
break;
case 'same':
execCommand('AppendSiblingNode');
break;
default:
break;
}
}
</script>

View File

@ -1,81 +0,0 @@
<template>
<div class="menu-item">
<a-button
class="arco-btn-outline--secondary mb-[4px]"
:disabled="arrangeUpDisabled"
type="outline"
size="small"
@click="execCommand('ArrangeUp')"
>
<template #icon>
<icon-plus />
</template>
</a-button>
{{ t('minder.menu.move.up') }}
</div>
<div class="menu-item">
<a-button
class="arco-btn-outline--secondary mb-[4px]"
:disabled="arrangeDownDisabled"
type="outline"
size="small"
@click="execCommand('ArrangeDown')"
>
<template #icon>
<icon-plus />
</template>
</a-button>
{{ t('minder.menu.move.down') }}
</div>
</template>
<script lang="ts" name="moveBox" setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import { isDisableNode } from '../../script/tool/utils';
const { t } = useI18n();
const props = defineProps<{
moveEnable: boolean;
moveConfirm: any;
}>();
let minder = reactive<any>({});
const arrangeUpDisabled = ref(true);
const arrangeDownDisabled = ref(true);
function checkDisabled() {
try {
if (Object.keys(minder).length === 0) return false;
} catch (e) {
// windowminderundefined
return false;
}
const node = minder.getSelectedNode();
if (!props.moveEnable || !node || node.parent === null || isDisableNode(minder)) {
arrangeUpDisabled.value = true;
arrangeDownDisabled.value = true;
return;
}
if (window.minder.queryCommandState) {
arrangeUpDisabled.value = window.minder.queryCommandState('ArrangeUp') === -1;
arrangeDownDisabled.value = window.minder.queryCommandState('ArrangeDown') === -1;
}
}
onMounted(() => {
nextTick(() => {
minder = window.minder;
minder.on('selectionchange', () => {
checkDisabled();
});
});
});
function execCommand(command: string) {
if (window.minder.queryCommandState(command) !== -1) window.minder.execCommand(command);
}
</script>

View File

@ -1,97 +0,0 @@
<template>
<div class="progress-group">
<ul>
<ul :disabled="commandDisabled">
<li
v-for="(item, index) in items"
:key="item.text"
class="menu-btn"
:class="classArray(index)"
:title="title(index)"
@click="execCommand(index)"
/>
</ul>
</ul>
</div>
</template>
<script lang="ts" name="progressBox" setup>
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import { isDisableNode } from '../../script/tool/utils';
const { t } = useI18n();
let minder = reactive<any>({});
const commandValue = ref('');
const items = [
{ text: '0' },
{ text: '1' },
{ text: '2' },
{ text: '3' },
{ text: '4' },
{ text: '5' },
{ text: '6' },
{ text: '7' },
{ text: '8' },
{ text: '9' },
];
onMounted(() => {
nextTick(() => {
minder = window.minder;
});
});
const commandDisabled = computed(() => {
if (Object.keys(minder).length === 0 || !minder.on) return true;
minder.on('interactchange', () => {
commandValue.value = minder.queryCommandValue && minder.queryCommandValue('progress');
});
if (isDisableNode(minder)) {
return true;
}
return minder.queryCommandState && minder.queryCommandState('progress') === -1;
});
function execCommand(index: number) {
if (!commandDisabled.value && minder.execCommand) {
minder.execCommand('progress', index);
}
}
function classArray(index: number) {
const isActive = minder.queryCommandValue && minder.queryCommandValue('progress') === index;
const sequence = `progress-${index}`;
// class
const arr = [
{
active: isActive,
},
sequence,
];
return arr;
}
function title(index: number) {
switch (index) {
case 0:
return t('minder.menu.progress.remove_progress');
case 1:
return t('minder.menu.progress.prepare');
case 9:
return t('minder.menu.progress.complete_all');
default:
return `${t('minder.menu.progress.complete') + (index - 1)}/8`;
}
}
</script>
<style lang="less" scoped>
.progress-group li {
background-image: url('@/assets/images/minder/iconprogress.png');
}
</style>

View File

@ -1,123 +0,0 @@
<template>
<div class="selection-group">
<a-button type="text" class="tab-icons selection" @click="selectAll" />
<a-dropdown :popup-max-height="false" @select="handleCommand">
<span class="dropdown-link">
{{ t('minder.menu.selection.all') }}
<icon-caret-down />
</span>
<template #content>
<a-doption value="1">{{ t('minder.menu.selection.invert') }}</a-doption>
<a-doption value="2">{{ t('minder.menu.selection.sibling') }}</a-doption>
<a-doption value="3">{{ t('minder.menu.selection.same') }}</a-doption>
<a-doption value="4">{{ t('minder.menu.selection.path') }}</a-doption>
<a-doption value="5">{{ t('minder.menu.selection.subtree') }}</a-doption>
</template>
</a-dropdown>
</div>
</template>
<script lang="ts" name="selection" setup>
import { useI18n } from '@/hooks/useI18n';
const { t } = useI18n();
function selectAll() {
const selection: any[] = [];
window.minder.getRoot().traverse((node: any) => {
selection.push(node);
});
window.minder.select(selection, true);
window.minder.fire('receiverfocus');
}
function selectRevert() {
const selected = window.minder.getSelectedNodes();
const selection: any[] = [];
window.minder.getRoot().traverse((node: any) => {
if (selected.indexOf(node) === -1) {
selection.push(node);
}
});
window.minder.select(selection, true);
window.minder.fire('receiverfocus');
}
function selectSiblings() {
const selected = window.minder.getSelectedNodes();
const selection: any[] = [];
selected.forEach((node: any) => {
if (!node.parent) return;
node.parent.children.forEach((sibling: string) => {
if (selection.indexOf(sibling) === -1) selection.push(sibling);
});
});
window.minder.select(selection, true);
window.minder.fire('receiverfocus');
}
function selectLevel() {
const selectedLevel = window.minder.getSelectedNodes().map((node: any) => node.getLevel());
const selection: any[] = [];
window.minder.getRoot().traverse((node: any) => {
if (selectedLevel.indexOf(node.getLevel()) !== -1) {
selection.push(node);
}
});
window.minder.select(selection, true);
window.minder.fire('receiverfocus');
}
function selectPath() {
const selected = window.minder.getSelectedNodes();
const selection: any[] = [];
selected.forEach((node: any) => {
let tempNode = node;
while (tempNode && selection.indexOf(tempNode) === -1) {
selection.push(tempNode);
tempNode = node.parent;
}
});
window.minder.select(selection, true);
window.minder.fire('receiverfocus');
}
function selectTree() {
const selected = window.minder.getSelectedNodes();
const selection: any[] = [];
selected.forEach((parent: any) => {
parent.traverse((node: any) => {
if (selection.indexOf(node) === -1) selection.push(node);
});
});
window.minder.select(selection, true);
window.minder.fire('receiverfocus');
}
function handleCommand(value: string | number | Record<string, any> | undefined) {
switch (value) {
case 1:
selectRevert();
break;
case 2:
selectSiblings();
break;
case 3:
selectLevel();
break;
case 4:
selectPath();
break;
case 5:
selectTree();
break;
default:
}
}
</script>
<style lang="less" scoped>
.dropdown-link {
@apply cursor-pointer;
}
</style>

View File

@ -1,157 +0,0 @@
<template>
<div class="flex items-center">
<a-button
:disabled="commandDisabled"
class="delete-btn !mx-[4px] !my-0 !h-[23px] !w-[23px] !p-[2px]"
shape="circle"
@click="execCommand()"
>
<template #icon>
<icon-delete />
</template>
</a-button>
<template v-for="(item, pIndex) in priorityCount + 1">
<a-button
v-if="pIndex != 0"
:key="item"
:disabled="commandDisabled"
class="priority-btn mr-[4px] h-[22px] w-[22px] rounded-[8px] pr-[5px] text-[12px] leading-[16px]"
:class="'priority-btn_' + pIndex"
size="small"
@click="execCommand(pIndex)"
>
{{ priorityPrefix }}{{ priorityStartWithZero ? pIndex - 1 : pIndex }}
</a-button>
</template>
</div>
</template>
<script lang="ts" name="sequenceBox" setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import { priorityProps } from '../../props';
import { isDisableNode, setPriorityView } from '../../script/tool/utils';
const props = defineProps(priorityProps);
const commandValue = ref('');
const commandDisabled = ref(true);
const minder = reactive<any>({});
const isDisable = (): boolean => {
if (Object.keys(minder).length === 0) return true;
nextTick(() => {
setPriorityView(props.priorityStartWithZero, props.priorityPrefix);
});
if (minder.on) {
minder.on('interactchange', () => {
commandValue.value = minder.queryCommandValue && minder.queryCommandValue('priority');
});
}
const node = minder.getSelectedNode();
if (isDisableNode(minder) || !node || node.parent === null) {
return true;
}
if (props.priorityDisableCheck) {
return props.priorityDisableCheck(node);
}
return !!minder.queryCommandState && minder.queryCommandState('priority') === -1;
};
// onMounted(() => {
// nextTick(() => {
// minder = window.minder;
// const freshFuc = setPriorityView;
// if (minder.on) {
// minder.on('contentchange', () => {
// //
// setTimeout(() => {
// freshFuc(props.priorityStartWithZero, props.priorityPrefix);
// }, 0);
// });
// minder.on('selectionchange', () => {
// commandDisabled.value = isDisable();
// });
// }
// });
// });
function execCommand(index?: number) {
if (index && minder.execCommand) {
if (!commandDisabled.value) {
minder.execCommand('priority', index);
}
setPriorityView(props.priorityStartWithZero, props.priorityPrefix);
} else if (minder.execCommand && !commandDisabled.value) {
minder.execCommand('priority');
}
}
</script>
<style lang="less" scoped>
.delete-btn {
border-color: #909399;
background-color: #909399;
i {
width: 1em !important;
height: 1em !important;
}
}
.priority-btn {
@apply border-none p-0 italic text-white;
}
.priority-btn_1 {
border-bottom: 3px solid #840023;
background-color: #ff1200;
}
.priority-btn_1:hover:not(:disabled) {
border-bottom: 3px solid #840023;
color: white;
background-color: #ff1200;
}
.priority-btn_2 {
border-bottom: 3px solid #01467f;
background-color: #0074ff;
}
.priority-btn_2:hover:not(:disabled) {
border-bottom: 3px solid #01467f;
color: white;
background-color: #0074ff;
}
.priority-btn_3 {
border-bottom: 3px solid #006300;
background-color: #00af00;
}
.priority-btn_3:hover:not(:disabled) {
border-bottom: 3px solid #006300;
color: white;
background-color: #00af00;
}
.priority-btn_4 {
border-bottom: 3px solid #b25000;
background-color: #ff962e;
}
.priority-btn_4:hover:not(:disabled) {
border-bottom: 3px solid #b25000;
color: white;
background-color: #ff962e;
}
.priority-btn_5 {
border-bottom: 3px solid #4720c4;
background-color: #a464ff;
}
.priority-btn_5:hover:not(:disabled) {
border-bottom: 3px solid #4720c4;
color: white;
background-color: #a464ff;
}
.priority-btn_6 {
border-bottom: 3px solid #515151;
background-color: #a3a3a3;
}
.priority-btn_6:hover:not(:disabled) {
border-bottom: 3px solid #515151;
color: white;
background-color: #a3a3a3;
}
</style>

View File

@ -1,130 +0,0 @@
<template>
<div v-if="tagList.length > 0" class="menu-group flex items-center">
<a-tag
v-for="item in tagList"
:key="item"
:color="getResourceColor(item)"
:class="commandDisabled ? 'disabledTag' : ''"
@click="editResource(item)"
>
{{ item }}
</a-tag>
</div>
</template>
<script lang="ts" name="TagBox" setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import useMinderStore from '@/store/modules/components/minder-editor';
import { MinderEventName } from '@/enums/minderEnum';
import { MinderJsonNode, tagProps } from '../../props';
import { isDisableNode, isTagEnable } from '../../script/tool/utils';
const props = defineProps(tagProps);
const minderStore = useMinderStore();
let minder = reactive<any>({});
const commandDisabled = ref(true);
const isDisable = (): boolean => {
if (Object.keys(minder).length === 0 || !minder.on) return true;
if (isDisableNode(minder) && !isTagEnable(minder)) {
return true;
}
if (props.tagDisableCheck) {
return props.tagDisableCheck();
}
return !!minder.queryCommandState && minder.queryCommandState('resource') === -1;
};
const tagList = ref(props.tags);
onMounted(() => {
nextTick(() => {
minder = window.minder;
minder.on('selectionchange', () => {
commandDisabled.value = isDisable();
const nodes: MinderJsonNode[] = window.minder.getSelectedNodes();
if (commandDisabled.value) {
tagList.value = [];
} else if (props.replaceableTags) {
tagList.value = props.replaceableTags(nodes);
} else {
tagList.value = [];
}
});
});
});
function getResourceColor(resource: string) {
if (minder.getResourceColor) {
return minder.getResourceColor(resource).toHEX();
}
}
function editResource(resourceName: string) {
if (commandDisabled.value) {
return;
}
if (props.tagEditCheck) {
const nodes: MinderJsonNode[] = minder.getSelectedNodes();
if (!props.tagEditCheck(nodes, resourceName)) {
return;
}
}
if (!resourceName || !/\S/.test(resourceName)) {
return;
}
const origin = window.minder.queryCommandValue('resource');
if (props.singleTag) {
origin.splice(0, origin.length, resourceName);
} else {
const index = origin.indexOf(resourceName);
//
if (props.distinctTags.indexOf(resourceName) > -1) {
for (let i = 0; i < origin.length; i++) {
if (props.distinctTags.indexOf(origin[i]) > -1) {
origin.splice(i, 1);
i--;
}
}
}
if (index !== -1) {
origin.splice(index, 1);
} else {
origin.push(resourceName);
}
}
window.minder.execCommand('resource', origin);
const nodes: MinderJsonNode[] = window.minder.getSelectedNodes();
minderStore.dispatchEvent(MinderEventName.SET_TAG, undefined, undefined, undefined, nodes);
if (props.replaceableTags) {
tagList.value = props.replaceableTags(nodes);
}
if (props.afterTagEdit) {
props.afterTagEdit(nodes, resourceName);
}
}
</script>
<style lang="less" scoped>
.arco-tag {
@apply border-none text-black;
margin-right: 4px;
}
.arco-tag:hover {
@apply cursor-pointer;
}
.arco-tag:first-child {
margin-left: 4px;
}
.disabledTag {
@apply !cursor-not-allowed;
color: var(--color-text-4);
background-color: var(--color-secondary-disabled);
}
</style>

View File

@ -195,25 +195,17 @@
import { useI18n } from '@/hooks/useI18n';
import useMinderStore from '@/store/modules/components/minder-editor/index';
import { MinderNodePosition } from '@/store/modules/components/minder-editor/types';
import { getGenerateId, sleep } from '@/utils';
import { sleep } from '@/utils';
import { MinderEventName } from '@/enums/minderEnum';
import {
floatMenuProps,
insertProps,
mainEditorProps,
MinderJsonNode,
MinderJsonNodeData,
priorityProps,
tagProps,
} from '../props';
import useMinderOperation from '../hooks/useMinderOperation';
import { floatMenuProps, mainEditorProps, MinderJsonNode, priorityProps, tagProps } from '../props';
import { isDisableNode, isNodeInMinderView, setPriorityView } from '../script/tool/utils';
const props = defineProps({
...mainEditorProps,
...floatMenuProps,
...insertProps,
...tagProps,
...priorityProps,
});
@ -277,31 +269,6 @@
const priorityMenuVisible = ref(false);
const moreMenuVisible = ref(false);
/**
* 执行插入
* @param command 插入命令
*/
function execInsertCommand(command: string, value?: string) {
const node: MinderJsonNode = window.minder.getSelectedNode();
if (props.insertNode) {
props.insertNode(node, command, value);
return;
}
if (window.minder.queryCommandState(command) !== -1) {
window.minder.execCommand(command);
nextTick(() => {
const newNode: MinderJsonNode = window.minder.getSelectedNode();
if (!newNode.data) {
newNode.data = {
id: getGenerateId(),
text: '',
};
}
newNode.data.isNew = true; //
});
}
}
/**
* 切换标签
* @param value 切换后的标签
@ -359,6 +326,10 @@
return !!window.minder.queryCommandState && window.minder.queryCommandState('priority') === -1;
}
const { minderCopy, minderCut, minderPaste, appendChildNode, appendSiblingNode, minderDelete } = useMinderOperation({
insertNode: props.insertNode,
});
/**
* 处理快捷菜单选择
* @param type 选择的菜单项
@ -368,48 +339,22 @@
if (selectedNodes.length > 0) {
switch (type) {
case 'AppendChildNode':
execInsertCommand('AppendChildNode', value);
minderStore.dispatchEvent(MinderEventName.INSERT_CHILD, value, undefined, undefined, selectedNodes);
appendChildNode(selectedNodes, value);
break;
case 'AppendSiblingNode':
execInsertCommand('AppendSiblingNode', value);
minderStore.dispatchEvent(MinderEventName.INSERT_SIBLING, value, undefined, undefined, selectedNodes);
appendSiblingNode(selectedNodes, value);
break;
case 'copy':
minderStore.dispatchEvent(MinderEventName.COPY_NODE, undefined, undefined, undefined, selectedNodes);
window.minder.execCommand('Copy');
minderCopy();
break;
case 'cut':
minderStore.dispatchEvent(MinderEventName.CUT_NODE, undefined, undefined, undefined, selectedNodes);
window.minder.execCommand('Cut');
minderCut();
break;
case 'paste':
minderStore.dispatchEvent(MinderEventName.PASTE_NODE, undefined, undefined, undefined, selectedNodes);
window.minder.execCommand('Paste');
let pastedNodes: MinderJsonNode[] = window.minder.getSelectedNodes();
if (pastedNodes.length > 0) {
pastedNodes = pastedNodes
.filter((e) => {
if (e.data?.id !== 'fakeNode' && e.data?.type !== 'tmp') {
return true;
}
window.minder.removeNode(e);
return false;
})
.map((e) => {
e.data = {
...(e.data as MinderJsonNodeData),
isNew: true,
id: getGenerateId(),
count: e.children?.length || 0,
};
return e;
});
}
minderPaste();
break;
case 'delete':
minderStore.dispatchEvent(MinderEventName.DELETE_NODE, undefined, undefined, undefined, selectedNodes);
window.minder.execCommand('RemoveNode');
minderDelete(selectedNodes);
break;
case 'enterNode':
minderStore.dispatchEvent(MinderEventName.ENTER_NODE, undefined, undefined, undefined, [selectedNodes[0]]);

View File

@ -34,12 +34,13 @@
import { MinderEventName } from '@/enums/minderEnum';
import useMinderEventListener from './hooks/useMinderEventListener';
import useMinderOperation from './hooks/useMinderOperation';
import useShortCut from './hooks/useShortCut';
import {
delProps,
editMenuProps,
floatMenuProps,
headerProps,
insertProps,
mainEditorProps,
MinderEvent,
MinderJson,
@ -49,7 +50,7 @@
tagProps,
viewMenuProps,
} from './props';
import { isNodeInMinderView } from './script/tool/utils';
import { isNodeInMinderView, setPriorityView } from './script/tool/utils';
const emit = defineEmits<{
(e: 'moldChange', data: number): void;
@ -66,7 +67,6 @@
const props = defineProps({
...headerProps,
...floatMenuProps,
...insertProps,
...editMenuProps,
...mainEditorProps,
...moleProps,
@ -115,6 +115,63 @@
emit('save', data, callback);
}
const { appendChildNode, appendSiblingNode, minderDelete } = useMinderOperation({
insertNode: props.insertNode,
});
const { unbindShortcuts } = useShortCut(
{
undo: () => {
window.minderHistory?.undo();
},
redo: () => {
window.minderHistory?.redo();
},
enter: () => {
if (props.canShowEnterNode) {
const selectedNodes: MinderJsonNode[] = window.minder.getSelectedNodes();
minderStore.dispatchEvent(MinderEventName.ENTER_NODE, undefined, undefined, undefined, [selectedNodes[0]]);
}
},
delete: () => {
if (props.canShowMoreMenuNodeOperation && props.canShowDeleteMenu) {
const selectedNodes: MinderJsonNode[] = window.minder.getSelectedNodes();
minderDelete(selectedNodes);
}
},
expand: () => {
const selectedNodes: MinderJsonNode[] = window.minder.getSelectedNodes();
if (selectedNodes.every((node) => node.isExpanded())) {
//
window.minder.execCommand('Collapse');
minderStore.dispatchEvent(MinderEventName.COLLAPSE, undefined, undefined, undefined, selectedNodes);
} else {
//
window.minder.execCommand('Expand');
if (!props.customPriority) {
//
setPriorityView(props.priorityStartWithZero, props.priorityPrefix);
}
minderStore.dispatchEvent(MinderEventName.EXPAND, undefined, undefined, undefined, selectedNodes);
}
},
appendChildNode: () => {
if (props.insertSonMenus.length > 0 || props.insertNode) {
const selectedNodes: MinderJsonNode[] = window.minder.getSelectedNodes();
appendChildNode(selectedNodes);
}
},
appendSiblingNode: () => {
if (props.insertSiblingMenus.length > 0 || props.insertNode) {
const selectedNodes: MinderJsonNode[] = window.minder.getSelectedNodes();
appendSiblingNode(selectedNodes);
}
},
},
{
insertNode: props.insertNode,
}
);
onMounted(() => {
window.minderProps = props;
useMinderEventListener({
@ -157,6 +214,10 @@
},
});
});
onUnmounted(() => {
unbindShortcuts();
});
</script>
<style lang="less" scoped>

View File

@ -64,6 +64,10 @@ export const mainEditorProps = {
minderKey: String as PropType<MinderKeyEnum>,
disabled: Boolean,
extractContentTabList: Array as PropType<{ label: string; value: string }[]>,
insertNode: {
type: Function as PropType<(node: MinderJsonNode, type: string, value?: string) => void>,
default: undefined,
},
};
export const headerProps = {
@ -207,13 +211,6 @@ export const floatMenuProps = {
},
};
export const insertProps = {
insertNode: {
type: Function as PropType<(node: MinderJsonNode, type: string, value?: string) => void>,
default: undefined,
},
};
export const editMenuProps = {
sequenceEnable: {
type: Boolean,

View File

@ -1,6 +1,7 @@
import type { MinderJsonNode, MinderJsonNodeData } from '@/components/pure/ms-minder-editor/props';
import type { MinderNodePosition } from '@/store/modules/components/minder-editor/types';
import { getGenerateId, mapTree } from '@/utils';
export function isDisableNode(minder: any) {
let node: MinderJsonNode;
@ -120,20 +121,25 @@ export function setCustomPriorityView(valueMap: Record<any, string>) {
}
/**
* id置为nullchanged true
*
* @param node
*/
export function resetNodes(nodes: MinderJsonNode[]) {
if (nodes) {
nodes.forEach((item: any) => {
if (item.data) {
item.data.id = null;
item.data.contextChanged = true;
item.data.changed = true;
resetNodes(item.children);
}
});
}
return mapTree(nodes, (node) => {
if (node.data && node.data?.id !== 'fakeNode' && node.data?.type !== 'tmp') {
node.data = {
...node.data,
isNew: true,
id: getGenerateId(),
count:
node.children?.filter((e: MinderJsonNode) => e.data?.id !== 'fakeNode' && e.data?.type !== 'tmp').length || 0,
type: 'ADD',
changed: false,
};
return node;
}
return null;
});
}
export function isDisableForNode(node: MinderJsonNode) {

View File

@ -3,6 +3,7 @@ export enum MinderEventName {
'HOTBOX' = 'HOTBOX', // 热键菜单
'ENTER_NODE' = 'ENTER_NODE', // 进入节点
'EXPAND' = 'EXPAND', // 展开节点
'COLLAPSE' = 'COLLAPSE', // 折叠节点
'INSERT_CHILD' = 'INSERT_CHILD', // 插入子节点
'INSERT_SIBLING' = 'INSERT_SIBLING', // 插入同级节点
'COPY_NODE' = 'COPY_NODE', // 复制节点

View File

@ -39,6 +39,7 @@ const useMinderStore = defineStore('minder', {
/**
*
* @param name
* @param params
* @param position /
* @param nodeDom DOM
* @param nodes
@ -90,7 +91,14 @@ const useMinderStore = defineStore('minder', {
setClipboard(nodes?: MinderJsonNode[]) {
this.clipboard = mapTree(nodes || [], (node) => {
if (node.id !== 'fakeNode' && node.type !== 'tmp') {
return { ...node, id: getGenerateId(), type: 'ADD' };
return {
...node,
id: getGenerateId(),
type: 'ADD',
isNew: true,
changed: false,
count: node.children?.length || 0,
};
}
return null;
});

View File

@ -135,7 +135,7 @@
{
key: 'belongModule',
locale: 'apiTestManagement.belongModule',
value: previewDetail.value.path,
value: previewDetail.value.moduleName,
},
{
key: 'creator',