feat(flow): 增加显示全部按钮并统一可操作节点过滤

This commit is contained in:
2025-12-28 13:08:58 +08:00
parent 93a8eb9ffb
commit 6f70269322

View File

@@ -14,6 +14,7 @@
</label> </label>
<span class="control-hint">对齐线已开启</span> <span class="control-hint">对齐线已开启</span>
<span class="control-hint">已选 {{ selectedCount }}</span> <span class="control-hint">已选 {{ selectedCount }}</span>
<button class="control-button" type="button" @click="showAllNodes">显示全部</button>
</div> </div>
<div class="control-row"> <div class="control-row">
<div class="control-label">对齐</div> <div class="control-label">对齐</div>
@@ -184,6 +185,19 @@ function updateNodeMeta(model: BaseNodeModel, updater: (meta: Record<string, any
applyMetaToModel(model, nextMeta); applyMetaToModel(model, nextMeta);
} }
function getSelectedNodeModelsFiltered(options?: { includeHidden?: boolean; includeLocked?: boolean }) {
const includeHidden = options?.includeHidden ?? false;
const includeLocked = options?.includeLocked ?? false;
const graphModel = lf.value?.graphModel;
if (!graphModel) return [];
return graphModel.selectNodes.filter((model: BaseNodeModel) => {
const meta = ensureMeta((model.getProperties?.() as any)?.meta ?? (model as any)?.properties?.meta);
if (!includeHidden && meta.visible === false) return false;
if (!includeLocked && meta.locked) return false;
return true;
});
}
function getSelectedNodeModels() { function getSelectedNodeModels() {
const graphModel = lf.value?.graphModel; const graphModel = lf.value?.graphModel;
if (!graphModel) return []; if (!graphModel) return [];
@@ -214,7 +228,7 @@ function collectGroupNodeIds(models: BaseNodeModel[]) {
function moveSelectedNodes(deltaX: number, deltaY: number) { function moveSelectedNodes(deltaX: number, deltaY: number) {
const graphModel = lf.value?.graphModel; const graphModel = lf.value?.graphModel;
if (!graphModel) return; if (!graphModel) return;
const targets = collectGroupNodeIds(getSelectedNodeModels()); const targets = collectGroupNodeIds(getSelectedNodeModelsFiltered());
if (!targets.length) return; if (!targets.length) return;
graphModel.moveNodes(targets, deltaX, deltaY); graphModel.moveNodes(targets, deltaX, deltaY);
} }
@@ -224,7 +238,8 @@ function deleteSelectedElements(event?: KeyboardEvent) {
const lfInstance = lf.value; const lfInstance = lf.value;
if (!lfInstance) return true; if (!lfInstance) return true;
const { nodes, edges } = lfInstance.getSelectElements(true); const { edges } = lfInstance.getSelectElements(true);
const nodes = getSelectedNodeModelsFiltered({ includeHidden: false, includeLocked: true });
const lockedNodes = nodes.filter((node) => ensureMeta((node as any).properties?.meta).locked); const lockedNodes = nodes.filter((node) => ensureMeta((node as any).properties?.meta).locked);
edges.forEach((edge) => edge.id && lfInstance.deleteEdge(edge.id)); edges.forEach((edge) => edge.id && lfInstance.deleteEdge(edge.id));
nodes nodes
@@ -258,7 +273,7 @@ function toggleLockSelected(event?: KeyboardEvent) {
function toggleVisibilitySelected(event?: KeyboardEvent) { function toggleVisibilitySelected(event?: KeyboardEvent) {
if (shouldSkipShortcut(event)) return true; if (shouldSkipShortcut(event)) return true;
const models = getSelectedNodeModels(); const models = getSelectedNodeModelsFiltered({ includeLocked: true });
if (!models.length) { if (!models.length) {
showMessage('info', '请选择节点后再执行显示/隐藏'); showMessage('info', '请选择节点后再执行显示/隐藏');
return true; return true;
@@ -274,9 +289,31 @@ function toggleVisibilitySelected(event?: KeyboardEvent) {
return false; return false;
} }
function showAllNodes() {
const lfInstance = lf.value;
if (!lfInstance) return;
let changed = 0;
lfInstance.graphModel?.nodes.forEach((model: BaseNodeModel) => {
const props = (model.getProperties?.() as any) ?? (model as any)?.properties ?? {};
const meta = ensureMeta(props.meta);
if (meta.visible === false) {
meta.visible = true;
lfInstance.setProperties(model.id, { ...props, meta });
applyMetaToModel(model, meta);
changed += 1;
}
});
if (changed > 0) {
showMessage('success', `已显示 ${changed} 个节点`);
} else {
showMessage('info', '没有隐藏的节点');
}
updateSelectedCount();
}
function groupSelectedNodes(event?: KeyboardEvent) { function groupSelectedNodes(event?: KeyboardEvent) {
if (shouldSkipShortcut(event)) return true; if (shouldSkipShortcut(event)) return true;
const models = getSelectedNodeModels().filter((model) => !ensureMeta((model.getProperties?.() as any)?.meta).locked); const models = getSelectedNodeModelsFiltered();
if (models.length < 2) { if (models.length < 2) {
showMessage('warning', '请选择至少两个未锁定的节点进行分组'); showMessage('warning', '请选择至少两个未锁定的节点进行分组');
return true; return true;
@@ -406,11 +443,8 @@ function applySnapGrid(enabled: boolean) {
function getSelectedRects() { function getSelectedRects() {
const lfInstance = lf.value; const lfInstance = lf.value;
if (!lfInstance) return []; if (!lfInstance) return [];
const unlocked = lfInstance.graphModel.selectNodes.filter((model: BaseNodeModel) => { const actionable = getSelectedNodeModelsFiltered();
const meta = ensureMeta((model.getProperties?.() as any)?.meta ?? (model as any)?.properties?.meta); return actionable.map((model: BaseNodeModel) => {
return !meta.locked && meta.visible !== false;
});
return unlocked.map((model: BaseNodeModel) => {
const bounds = model.getBounds(); const bounds = model.getBounds();
const width = bounds.maxX - bounds.minX; const width = bounds.maxX - bounds.minX;
const height = bounds.maxY - bounds.minY; const height = bounds.maxY - bounds.minY;