mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-11-04 10:49:51 +08:00
feat(edtior): 代码块使用依赖收集器改造
This commit is contained in:
roymondchen
parent
35f9a59f44
commit
3b6ca97f4c
@ -68,7 +68,7 @@ import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch
|
||||
|
||||
import { EventOption } from '@tmagic/core';
|
||||
import type { FormConfig } from '@tmagic/form';
|
||||
import type { MApp, MNode } from '@tmagic/schema';
|
||||
import { CodeBlockContent, Id, MApp, MNode, MPage } from '@tmagic/schema';
|
||||
import StageCore, {
|
||||
CONTAINER_HIGHLIGHT_CLASS_NAME,
|
||||
ContainerHighlightType,
|
||||
@ -84,12 +84,14 @@ import Sidebar from './layouts/sidebar/Sidebar.vue';
|
||||
import Workspace from './layouts/workspace/Workspace.vue';
|
||||
import codeBlockService from './services/codeBlock';
|
||||
import componentListService from './services/componentList';
|
||||
import depService from './services/dep';
|
||||
import editorService from './services/editor';
|
||||
import eventsService from './services/events';
|
||||
import historyService from './services/history';
|
||||
import propsService from './services/props';
|
||||
import storageService from './services/storage';
|
||||
import uiService from './services/ui';
|
||||
import { createCodeBlockTarget } from './utils/dep';
|
||||
import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, Services, SideBarData, StageRect } from './type';
|
||||
|
||||
export default defineComponent({
|
||||
@ -227,7 +229,7 @@ export default defineComponent({
|
||||
emits: ['props-panel-mounted', 'update:modelValue'],
|
||||
|
||||
setup(props, { emit }) {
|
||||
const rootChangeHandler = (value: MApp, preValue?: MApp | null) => {
|
||||
const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
|
||||
const nodeId = editorService.get('node')?.id || props.defaultSelected;
|
||||
let node;
|
||||
if (nodeId) {
|
||||
@ -235,9 +237,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
if (node && node !== value) {
|
||||
editorService.select(node.id);
|
||||
await editorService.select(node.id);
|
||||
} else if (value?.items?.length) {
|
||||
editorService.select(value.items[0]);
|
||||
await editorService.select(value.items[0]);
|
||||
} else if (value?.id) {
|
||||
editorService.set('nodes', [value]);
|
||||
editorService.set('parent', null);
|
||||
@ -251,9 +253,57 @@ export default defineComponent({
|
||||
value.codeBlocks = value.codeBlocks || {};
|
||||
|
||||
codeBlockService.setCodeDsl(value.codeBlocks);
|
||||
|
||||
depService.removeTargets('code-block');
|
||||
|
||||
Object.entries(value.codeBlocks).forEach(([id, code]) => {
|
||||
depService.addTarget(createCodeBlockTarget(id, code));
|
||||
});
|
||||
|
||||
if (value && Array.isArray(value.items)) {
|
||||
depService.collect(value.items, true);
|
||||
} else {
|
||||
depService.clear();
|
||||
}
|
||||
};
|
||||
|
||||
const nodeAddHandler = (nodes: MNode[]) => {
|
||||
depService.collect(nodes);
|
||||
};
|
||||
|
||||
const nodeUpdateHandler = (nodes: MNode[]) => {
|
||||
depService.collect(nodes);
|
||||
};
|
||||
|
||||
const nodeRemoveHandler = (nodes: MNode[]) => {
|
||||
depService.clear(nodes);
|
||||
};
|
||||
|
||||
const historyChangeHandler = (page: MPage) => {
|
||||
depService.collect([page], true);
|
||||
};
|
||||
|
||||
editorService.on('history-change', historyChangeHandler);
|
||||
editorService.on('root-change', rootChangeHandler);
|
||||
editorService.on('add', nodeAddHandler);
|
||||
editorService.on('remove', nodeRemoveHandler);
|
||||
editorService.on('update', nodeUpdateHandler);
|
||||
|
||||
const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
|
||||
if (depService.hasTarget(id)) {
|
||||
depService.getTarget(id)!.name = codeBlock.name;
|
||||
return;
|
||||
}
|
||||
|
||||
depService.addTarget(createCodeBlockTarget(id, codeBlock));
|
||||
};
|
||||
|
||||
const codeBlockRemoveHandler = (id: Id) => {
|
||||
depService.removeTarget(id);
|
||||
};
|
||||
|
||||
codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
|
||||
codeBlockService.on('remove', codeBlockRemoveHandler);
|
||||
|
||||
// 初始值变化，重新设置节点信息
|
||||
watch(
|
||||
@ -325,17 +375,6 @@ export default defineComponent({
|
||||
},
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
editorService.resetState();
|
||||
historyService.resetState();
|
||||
propsService.resetState();
|
||||
uiService.resetState();
|
||||
componentListService.resetState();
|
||||
codeBlockService.resetState();
|
||||
|
||||
editorService.off('root-change', rootChangeHandler);
|
||||
});
|
||||
|
||||
const services: Services = {
|
||||
componentListService,
|
||||
eventsService,
|
||||
@ -345,6 +384,7 @@ export default defineComponent({
|
||||
uiService,
|
||||
storageService,
|
||||
codeBlockService,
|
||||
depService,
|
||||
};
|
||||
|
||||
provide('services', services);
|
||||
@ -366,8 +406,24 @@ export default defineComponent({
|
||||
disabledDragStart: props.disabledDragStart,
|
||||
}),
|
||||
);
|
||||
// 监听组件update
|
||||
codeBlockService.addCodeRelationListener();
|
||||
|
||||
onUnmounted(() => {
|
||||
editorService.resetState();
|
||||
historyService.resetState();
|
||||
propsService.resetState();
|
||||
uiService.resetState();
|
||||
componentListService.resetState();
|
||||
codeBlockService.resetState();
|
||||
|
||||
editorService.off('history-change', historyChangeHandler);
|
||||
editorService.off('root-change', rootChangeHandler);
|
||||
editorService.off('add', nodeAddHandler);
|
||||
editorService.off('remove', nodeRemoveHandler);
|
||||
editorService.off('update', nodeUpdateHandler);
|
||||
|
||||
codeBlockService.off('addOrUpdate', codeBlockAddOrUpdateHandler);
|
||||
codeBlockService.off('remove', codeBlockRemoveHandler);
|
||||
});
|
||||
|
||||
return services;
|
||||
},
|
||||
|
||||
@ -40,6 +40,7 @@ export { default as storageService } from './services/storage';
|
||||
export { default as eventsService } from './services/events';
|
||||
export { default as uiService } from './services/ui';
|
||||
export { default as codeBlockService } from './services/codeBlock';
|
||||
export { default as depService } from './services/dep';
|
||||
export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
|
||||
export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
|
||||
export { default as CodeSelect } from './fields/CodeSelect.vue';
|
||||
|
||||
@ -19,190 +19,118 @@
|
||||
<!-- 代码块列表 -->
|
||||
<TMagicScrollbar>
|
||||
<TMagicTree
|
||||
v-if="!isEmpty(state.codeList)"
|
||||
ref="tree"
|
||||
class="magic-editor-layer-tree"
|
||||
node-key="id"
|
||||
empty-text="暂无代码块"
|
||||
:data="state.codeList"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:data="codeList"
|
||||
:highlight-current="true"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="toggleCombineRelation"
|
||||
@node-click="clickHandler"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<div :id="data.id" class="list-container">
|
||||
<div class="list-item">
|
||||
<span class="code-name">{{ data.name }}（{{ data.id }}）</span>
|
||||
<!-- 右侧工具栏 -->
|
||||
<div class="right-tool">
|
||||
<div class="right-tool" v-if="data.type === 'code'">
|
||||
<TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
|
||||
<Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
|
||||
</TMagicTooltip>
|
||||
<TMagicTooltip
|
||||
effect="dark"
|
||||
content="查看绑定关系"
|
||||
placement="bottom"
|
||||
v-if="data.combineInfo && data.combineInfo.length > 0"
|
||||
>
|
||||
<Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
|
||||
</TMagicTooltip>
|
||||
<TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
|
||||
<Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
|
||||
</TMagicTooltip>
|
||||
<slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 展示代码块下绑定的组件 -->
|
||||
<div
|
||||
class="code-comp-map-wrapper"
|
||||
v-if="data.showRelation && data.combineInfo && data.combineInfo.length > 0"
|
||||
>
|
||||
<svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<TMagicButton
|
||||
v-for="(comp, index) in data.combineInfo"
|
||||
:key="index"
|
||||
class="code-comp"
|
||||
size="small"
|
||||
:plain="true"
|
||||
@click.stop="selectComp(comp.compId)"
|
||||
>{{ comp.compName }}</TMagicButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</TMagicTree>
|
||||
</TMagicScrollbar>
|
||||
|
||||
<!-- 代码块编辑区 -->
|
||||
<code-block-editor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
|
||||
<CodeBlockEditor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
|
||||
<template #code-block-edit-panel-header="{ id }">
|
||||
<slot name="code-block-edit-panel-header" :id="id"></slot>
|
||||
</template>
|
||||
</code-block-editor>
|
||||
</CodeBlockEditor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="MEditorCodeBlockList">
|
||||
import { computed, inject, reactive, ref, watch } from 'vue';
|
||||
import { Close, Edit, Link, View } from '@element-plus/icons-vue';
|
||||
import { cloneDeep, forIn, isEmpty } from 'lodash-es';
|
||||
<script setup lang="ts" name="MEditorCodeBlockList">
|
||||
import { computed, inject, ref } from 'vue';
|
||||
import { Close, Edit, View } from '@element-plus/icons-vue';
|
||||
|
||||
import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
|
||||
import { ColumnConfig } from '@tmagic/form';
|
||||
import { CodeBlockContent, Id } from '@tmagic/schema';
|
||||
|
||||
import Icon from '../../../components/Icon.vue';
|
||||
import type { CodeRelation, CombineInfo, Services } from '../../../type';
|
||||
import { CodeDeleteErrorType, CodeDslItem, ListState } from '../../../type';
|
||||
import { CodeDeleteErrorType, CodeDslItem, Services } from '../../../type';
|
||||
|
||||
import codeBlockEditor from './CodeBlockEditor.vue';
|
||||
import CodeBlockEditor from './CodeBlockEditor.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
|
||||
paramsColConfig?: ColumnConfig;
|
||||
}>();
|
||||
|
||||
const services = inject<Services>('services');
|
||||
const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
|
||||
|
||||
// 代码块列表
|
||||
const state = reactive<ListState>({
|
||||
codeList: [],
|
||||
});
|
||||
const codeList = computed(() =>
|
||||
Object.values(depService?.targets['code-block'] || {}).map((target) => ({
|
||||
id: target.id,
|
||||
name: target.name,
|
||||
type: 'code',
|
||||
children: Object.entries(target.deps).map(([id, dep]) => ({
|
||||
name: dep.name,
|
||||
type: 'node',
|
||||
id,
|
||||
children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
|
||||
})),
|
||||
})),
|
||||
);
|
||||
|
||||
const editable = computed(() => services?.codeBlockService.getEditStatus());
|
||||
const editable = computed(() => codeBlockService?.getEditStatus());
|
||||
|
||||
// 是否展示代码编辑区
|
||||
const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
|
||||
// 获取绑定关系
|
||||
const codeCombineInfo = ref<CodeRelation | null>(null);
|
||||
|
||||
// 根据代码块ID获取其绑定的组件信息
|
||||
const getBindCompsByCodeId = (codeId: Id): CombineInfo[] => {
|
||||
if (!codeCombineInfo.value) return [];
|
||||
const bindsComp = [] as CombineInfo[];
|
||||
forIn(codeCombineInfo.value, (codeIds, compId) => {
|
||||
if (codeIds.includes(codeId)) {
|
||||
bindsComp.push({
|
||||
compId,
|
||||
compName: getCompName(compId),
|
||||
});
|
||||
}
|
||||
});
|
||||
return bindsComp as CombineInfo[];
|
||||
};
|
||||
|
||||
// 更新代码块列表
|
||||
const refreshCodeList = async () => {
|
||||
const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
|
||||
codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
|
||||
if (!codeDsl || !codeCombineInfo.value) return;
|
||||
state.codeList = [];
|
||||
forIn(codeDsl, (value: CodeBlockContent, codeId: Id) => {
|
||||
state.codeList.push({
|
||||
id: codeId,
|
||||
name: value.name,
|
||||
codeBlockContent: value,
|
||||
showRelation: true,
|
||||
combineInfo: getBindCompsByCodeId(codeId),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => services?.editorService.get('root'),
|
||||
() => {
|
||||
services?.codeBlockService.refreshAllRelations();
|
||||
refreshCodeList();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
[() => services?.codeBlockService.getCodeDsl(), () => services?.codeBlockService.getCombineInfo()],
|
||||
() => {
|
||||
refreshCodeList();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
|
||||
|
||||
// 新增代码块
|
||||
const createCodeBlock = async () => {
|
||||
const { codeBlockService } = services || {};
|
||||
if (!codeBlockService) {
|
||||
tMagicMessage.error('新增代码块失败');
|
||||
return;
|
||||
}
|
||||
|
||||
const codeConfig: CodeBlockContent = {
|
||||
name: '代码块',
|
||||
content: `({app, params}) => {\n // place your code here\n}`,
|
||||
params: [],
|
||||
};
|
||||
|
||||
const id = await codeBlockService.getUniqueId();
|
||||
|
||||
await codeBlockService.setCodeDslById(id, codeConfig);
|
||||
codeBlockService.setCodeEditorContent(true, id);
|
||||
};
|
||||
|
||||
// 编辑代码块
|
||||
const editCode = async (key: Id) => {
|
||||
services?.codeBlockService.setCodeEditorContent(true, key);
|
||||
codeBlockService?.setCodeEditorContent(true, key);
|
||||
};
|
||||
|
||||
// 删除代码块
|
||||
const deleteCode = (key: Id) => {
|
||||
const currentCode = state.codeList.find((codeItem: CodeDslItem) => codeItem.id === key);
|
||||
const existBinds = !isEmpty(currentCode?.combineInfo);
|
||||
const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
|
||||
const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
|
||||
const existBinds = Boolean(currentCode?.children.length);
|
||||
const undeleteableList = codeBlockService?.getUndeletableList() || [];
|
||||
if (!existBinds && !undeleteableList.includes(key)) {
|
||||
// 无绑定关系，且不在不可删除列表中
|
||||
services?.codeBlockService.deleteCodeDslByIds([key]);
|
||||
codeBlockService?.deleteCodeDslByIds([key]);
|
||||
} else {
|
||||
if (typeof props.customError === 'function') {
|
||||
props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
|
||||
@ -213,37 +141,31 @@ const deleteCode = (key: Id) => {
|
||||
};
|
||||
|
||||
const filterText = ref('');
|
||||
const tree = ref();
|
||||
const tree = ref<InstanceType<typeof TMagicTree>>();
|
||||
|
||||
const filterNode = (value: string, data: CodeDslItem): boolean => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
return `${data.name}${data.id}`.indexOf(value) !== -1;
|
||||
return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
|
||||
};
|
||||
|
||||
const filterTextChangeHandler = (val: string) => {
|
||||
tree.value?.filter(val);
|
||||
};
|
||||
|
||||
// 展示/隐藏组件绑定关系
|
||||
const toggleCombineRelation = (data: CodeDslItem) => {
|
||||
const { id } = data;
|
||||
const currentCode = state.codeList.find((item) => item.id === id);
|
||||
if (!currentCode) return;
|
||||
currentCode.showRelation = !currentCode?.showRelation;
|
||||
};
|
||||
|
||||
// 获取组件名称展示到tag上
|
||||
const getCompName = (compId: Id): string => {
|
||||
const node = services?.editorService.getNodeById(compId);
|
||||
return node?.name || String(compId);
|
||||
};
|
||||
|
||||
// 选中组件
|
||||
const selectComp = (compId: Id) => {
|
||||
const stage = services?.editorService.get('stage');
|
||||
services?.editorService.select(compId);
|
||||
const stage = editorService?.get('stage');
|
||||
editorService?.select(compId);
|
||||
stage?.select(compId);
|
||||
};
|
||||
|
||||
const clickHandler = (data: any, node: any) => {
|
||||
if (data.type === 'node') {
|
||||
selectComp(data.id);
|
||||
} else if (data.type === 'key') {
|
||||
selectComp(node.parent.data.id);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -17,12 +17,11 @@
|
||||
*/
|
||||
|
||||
import { reactive } from 'vue';
|
||||
import { cloneDeep, forIn, isEmpty, keys, omit, pick, union } from 'lodash-es';
|
||||
import { keys, pick } from 'lodash-es';
|
||||
|
||||
import { CodeBlockContent, CodeBlockDSL, HookType, Id, MNode, MPage } from '@tmagic/schema';
|
||||
import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
|
||||
|
||||
import editorService from '../services/editor';
|
||||
import type { CodeRelation, CodeState, HookData } from '../type';
|
||||
import type { CodeState } from '../type';
|
||||
import { CODE_DRAFT_STORAGE_KEY } from '../type';
|
||||
import { info } from '../utils/logger';
|
||||
|
||||
@ -36,7 +35,6 @@ class CodeBlock extends BaseService {
|
||||
editable: true,
|
||||
combineIds: [],
|
||||
undeletableList: [],
|
||||
relations: {},
|
||||
});
|
||||
|
||||
constructor() {
|
||||
@ -112,6 +110,8 @@ class CodeBlock extends BaseService {
|
||||
...existContent,
|
||||
...codeConfigProcessed,
|
||||
};
|
||||
|
||||
this.emit('addOrUpdate', id, codeDsl[id]);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -213,56 +213,6 @@ class CodeBlock extends BaseService {
|
||||
return this.state.combineIds;
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听组件更新来更新代码块绑定关系
|
||||
* @returns {void}
|
||||
*/
|
||||
public addCodeRelationListener(): void {
|
||||
// 监听组件更新
|
||||
editorService.on('update', (nodes: MNode[]) => {
|
||||
const relations: CodeRelation = cloneDeep(this.state.relations);
|
||||
nodes.forEach((node: MNode) => {
|
||||
if (node?.id) {
|
||||
relations[node.id] = [];
|
||||
this.getNodeRelation(node, relations);
|
||||
}
|
||||
});
|
||||
this.state.relations = { ...relations };
|
||||
});
|
||||
// 监听组件删除
|
||||
editorService.on('remove', (nodes: MNode[]) => {
|
||||
nodes.forEach((node: MNode) => {
|
||||
this.state.relations = this.deleteNodeRelation(node, this.state.relations);
|
||||
});
|
||||
});
|
||||
// 监听历史记录，历史快照为页面整体，需要深层遍历更新
|
||||
editorService.on('history-change', (page: MPage) => {
|
||||
const relations: CodeRelation = {};
|
||||
this.getNodeRelation(page, relations, true);
|
||||
this.state.relations = relations;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新全部绑定关系
|
||||
* @returns {void}
|
||||
*/
|
||||
public refreshAllRelations(): void {
|
||||
const root = editorService.get('root');
|
||||
if (!root) return;
|
||||
const relations: CodeRelation = {};
|
||||
this.getNodeRelation(root, relations, true);
|
||||
this.state.relations = relations;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取绑定关系
|
||||
* @returns {CodeRelation}
|
||||
*/
|
||||
public getCombineInfo(): CodeRelation {
|
||||
return this.state.relations;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取不可删除列表
|
||||
* @returns {Id[]}
|
||||
@ -312,6 +262,8 @@ class CodeBlock extends BaseService {
|
||||
|
||||
codeIds.forEach((id) => {
|
||||
delete currentDsl[id];
|
||||
|
||||
this.emit('remove', id);
|
||||
});
|
||||
}
|
||||
|
||||
@ -342,65 +294,6 @@ class CodeBlock extends BaseService {
|
||||
this.removeAllListeners();
|
||||
this.removeAllPlugins();
|
||||
}
|
||||
|
||||
/**
|
||||
* 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
|
||||
* @param {MNode} node 节点信息
|
||||
* @param {CodeRelation} relation 关系数据
|
||||
* @param {boolean} deep 是否深层遍历
|
||||
* @returns void
|
||||
*/
|
||||
private getNodeRelation(node: MNode, relation: CodeRelation, deep = false): void {
|
||||
forIn(node, (value, key) => {
|
||||
if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
|
||||
value.hookData.forEach((relationItem: HookData) => {
|
||||
if (relationItem.codeId) {
|
||||
relation[node.id] = union(relation[node.id], [relationItem.codeId]);
|
||||
}
|
||||
});
|
||||
// continue
|
||||
return;
|
||||
}
|
||||
let isContinue = false;
|
||||
try {
|
||||
// 只遍历更新当前组件的关系，不再深层遍历容器包含的组件
|
||||
isContinue = key !== 'items' && typeof value === 'object' && JSON.stringify(value).includes('hookType');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
if (isContinue) {
|
||||
// 检查value内部是否有嵌套
|
||||
const unConfirmedValue = {
|
||||
id: node.id,
|
||||
...value,
|
||||
};
|
||||
this.getNodeRelation(unConfirmedValue, relation);
|
||||
}
|
||||
// 深层遍历用于代码列表初始化
|
||||
if (key === 'items' && !isEmpty(value) && deep) {
|
||||
value.forEach((item: MNode) => {
|
||||
this.getNodeRelation(item, relation, deep);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除组件关系
|
||||
* @param {MNode} node 节点信息
|
||||
* @param {CodeRelation} relations 关系数据
|
||||
* @returns CodeRelation
|
||||
*/
|
||||
private deleteNodeRelation(node: MNode, relations: CodeRelation): CodeRelation {
|
||||
if (!node.id) return {};
|
||||
let newRelations = omit(relations, [node.id]);
|
||||
if (!isEmpty(node.items)) {
|
||||
node.items.forEach((item: MNode) => {
|
||||
newRelations = this.deleteNodeRelation(item, newRelations);
|
||||
});
|
||||
}
|
||||
return newRelations;
|
||||
}
|
||||
}
|
||||
|
||||
export type CodeBlockService = CodeBlock;
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
.m-editor-code-block-list {
|
||||
height: 100%;
|
||||
margin-top: 5px;
|
||||
|
||||
.el-tree-node__content {
|
||||
height: auto;
|
||||
}
|
||||
.el-tree-node__label {
|
||||
width: 100%;
|
||||
}
|
||||
.code-header-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -32,45 +25,24 @@
|
||||
.list-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-left: -25px;
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.right-tool {
|
||||
width: fit-content !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content !important;
|
||||
.edit-icon {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
.code-name {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 10px 15px;
|
||||
width: 0 !important;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.code-comp-map-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 5px;
|
||||
.arrow-left {
|
||||
transform: rotate(-45deg);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.code-comp {
|
||||
margin-left: 5px;
|
||||
padding: 5px;
|
||||
.comp-delete-icon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,6 +30,7 @@ import type {
|
||||
|
||||
import type { CodeBlockService } from './services/codeBlock';
|
||||
import type { ComponentListService } from './services/componentList';
|
||||
import type { DepService } from './services/dep';
|
||||
import type { EditorService } from './services/editor';
|
||||
import type { EventsService } from './services/events';
|
||||
import type { HistoryService } from './services/history';
|
||||
@ -54,6 +55,7 @@ export interface Services {
|
||||
componentListService: ComponentListService;
|
||||
uiService: UiService;
|
||||
codeBlockService: CodeBlockService;
|
||||
depService: DepService;
|
||||
}
|
||||
|
||||
export interface StageOptions {
|
||||
@ -339,8 +341,6 @@ export type CodeState = {
|
||||
combineIds: string[];
|
||||
/** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
|
||||
undeletableList: Id[];
|
||||
/** 代码块和组件的绑定关系 */
|
||||
relations: CodeRelation;
|
||||
};
|
||||
|
||||
export type HookData = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user