hotline-web/src/components/LogicFlow/index.vue

<template>
	<div v-loading="loading" class="layout-padding w100 h100">
		<div class="layout-padding-auto layout-padding-view pd20">
			<!-- 外部内容表单 -->
			<el-form :model="form" label-width="80px" ref="ruleFormRef">
				<el-row :gutter="100">
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="模板名称" prop="name" :rules="[{ required: true, message: '请填写模板名称', trigger: 'blur' }]">
							<el-input v-model="form.name" placeholder="请填写模板名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="模板编码" prop="code" :rules="[{ required: true, message: '请填写模板编码', trigger: 'blur' }]">
							<el-input v-model="form.code" placeholder="请填写模板编码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="模板类型" prop="flowType" :rules="[{ required: true, message: '请选择模板类型', trigger: 'change' }]">
							<el-select v-model="form.flowType" class="w100" placeholder="请选择模板类型">
								<el-option v-for="item in baseDataResult.flowTypeOptions" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="展示主办" prop="isMainHandlerShow" :rules="[{ required: false, message: '请选择模板类型', trigger: 'change' }]">
							<el-switch v-model="form.isMainHandlerShow" inline-prompt active-text="展示" inactive-text="隐藏" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="模板描述" prop="description" :rules="[{ required: false, message: '请填写模板描述', trigger: 'blur' }]">
							<el-input v-model="form.description" placeholder="请填写模板描述" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<!-- 流程图画布内容 -->
			<div class="border w100 h100" style="position: relative; flex: 1">
				<div class="w100 h100" ref="lfElRef"></div>
			</div>
		</div>
		<!-- 节点内容弹窗 -->
		<PropertySetting
			ref="propertySettingRef"
			v-model="formData"
			@change="handlePropertyChange"
			@changeOther="handlePropertyChangeOther"
			:baseData="baseDataResult"
			:nodes="nodes"
		/>
	</div>
</template>
<script setup lang="ts" name="hotlineFlowDesigner">
import { defineAsyncComponent, nextTick, onMounted, reactive, Ref, ref, unref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import LogicFlow from '@logicflow/core';
import { Control, DndPanel, Group, InsertNodeInPolyline, Menu, MiniMap, SelectionSelect, Snapshot } from '@logicflow/extension';
// import '@logicflow/core/dist/style/index.css';
import '@logicflow/core/lib/style/index.css';
import '@logicflow/extension/lib/style/index.css';
import { SnakerFlowAdapter, SnakerFlowElement } from './snakerflow/index';
import { NodeTypeEnum } from './enums';
import { baseData, workflowAdd, workflowUpdate } from '@/api/system/workflow';
import mittBus from '@/utils/mitt';
import { throttle } from '@/utils/tools';
import { ElMessage, FormInstance } from 'element-plus';
// 引入组件
const PropertySetting = defineAsyncComponent(() => import('./PropertySetting/index.vue')); // 节点属性设置

const route = useRoute(); // 当前路由信息
const router = useRouter(); // 路由实例
const emits = defineEmits(['update:modelValue', 'on-save']); // 定义组件事件
// 提交表单数据
let formData = reactive({} as any);
// 外层表单
let form = reactive<Record<string, any>>({});
const ruleFormRef = ref<RefType>();
// 定义组件接收的参数
const props = defineProps({
	modelValue: {
		type: [Object, String],
	},
	config: {
		type: Object,
		default() {
			return {
				grid: {
					size: 20,
					visible: true,
					type: 'dot',
					config: {
						color: '#ababab',
						thickness: 1,
					},
				},
			};
		},
	},
	highLight: {
		// 高亮数据
		type: Object,
		default() {
			return {};
		},
	},
	viewer: {
		// 预览模式
		type: Boolean,
		default: false,
	},
	loading: {
		//加载状态
		type: Boolean,
		default: false,
	},
	extendAttrConfig: {
		// 扩展属性配置
		type: Object,
		default: () => {},
	},
});

// 监听流程变化
watch(
	() => props.modelValue,
	() => {
		reRender(props.modelValue);
	},
	{
		deep: true,
	}
);
// 初始化
// 定义挂载元素Ref
const lfElRef: Ref = ref(null);
// 定义LogicFlow实例
const lfInstance = ref(null) as Ref<LogicFlow | null>;
const init = async () => {
	// 画布配置
	LogicFlow.use(Snapshot);
	LogicFlow.use(DndPanel);
	LogicFlow.use(SelectionSelect);
	LogicFlow.use(Menu);
	LogicFlow.use(Control);
	LogicFlow.use(Group);
	LogicFlow.use(InsertNodeInPolyline);
	LogicFlow.use(MiniMap);
	LogicFlow.use(SnakerFlowElement);
	LogicFlow.use(SnakerFlowAdapter);
	const defaultConfig: any = {};
	lfInstance.value = new LogicFlow({
		container: unref(lfElRef),
		stopScrollGraph: true, // 进禁止鼠标滚动移动画布
		stopZoomGraph: false, // 禁止缩放画布
		autoExpand: false, // 节点拖动靠近画布边缘时是否自动扩充画布,
		keyboard: {
			// 键盘事件
			enabled: true,
		},
		...props.config,
		...defaultConfig,
		plugins: [MiniMap],
		pluginsOptions: {
			miniMap: {
				...miniMapOptions,
				showEdge: true,
			},
		},
	});
	// 初始化操作
	initOp();
	reRender(props.modelValue as any);
	// 初始化事件
	initEvent();
};
const miniMapOptions: MiniMap.MiniMapOption = {
	isShowHeader: false,
	isShowCloseIcon: true,
	headerTitle: 'MiniMap',
	width: 200,
	height: 120,
	// leftPosition: 100,
	// topPosition: 100,
};
// 初始化操作
const initOp = () => {
	const lf: any = unref(lfInstance);
	if (!lf) return;
	if (props.viewer) {
		// 预览模式时
		lf.extension.menu.setMenuConfig({
			nodeMenu: [],
			edgeMenu: [],
		});
		// 删除上一步
		lf.extension.control.removeItem('undo');
		// 删除下一步
		lf.extension.control.removeItem('redo');
		return;
	}

	lf.extension.menu.setMenuConfig({
		nodeMenu: [
			{
				text: '删除',
				callback(node: any) {
					lf.deleteNode(node.id);
				},
			},
		], // 覆盖默认的节点右键菜单
		edgeMenu: [
			{
				text: '删除',
				callback(node: any) {
					lf.deleteEdge(node.id);
				},
			},
		], // 删除默认的边右键菜单
		graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
	});
	// 控制面板-清空画布
	lf.extension.control.addItem({
		iconClass: 'lf-control-clear',
		title: '清空当前流程图',
		text: '清空',
		onClick: () => {
			lf.clearData();
		},
	});
	// 导航图
	lf.extension.control.addItem({
		iconClass: 'custom-minimap',
		title: '打开流程图导航',
		text: '导航',
		// onMouseEnter: (lf:any, ev:any) => {
		//   const position = lf.getPointByClient(ev.x, ev.y);
		//   lf.extension.miniMap.show(
		//     position.domOverlayPosition.x - 120,
		//     position.domOverlayPosition.y + 35
		//   );
		// },
		onClick: (lf: any, ev: any) => {
			const visible = lf.extension.miniMap.isShow;
			const miniMap = lfInstance.value.extension.miniMap as MiniMap;
			if (visible) {
				miniMap.hide();
			} else {
				miniMap.show();
			}
			/*			const position = lf.getPointByClient(ev.x, ev.y);
			lf.extension.miniMap.show(position.domOverlayPosition.x - 120, position.domOverlayPosition.y + 35);*/
		},
	});
	// 控制面板-暂存
	lf.extension.control.addItem({
		iconClass: 'lf-control-save',
		title: '保存',
		text: '保存',
		onClick: () => {
			saveOnly(ruleFormRef.value);
		},
	});
	lf.extension.snapshot.useGlobalRules = false;
	lf.extension.snapshot.customCssRules = `
    .lf-canvas-overlay {
      background: white;
    }
  `;
	// 控制面板-导出
	lf.extension.control.addItem({
		iconClass: 'lf-control-release',
		title: '导出为图片',
		text: '导出',
		onClick: () => {
			const exportName = lf.graphModel.name ? lf.graphModel.name : '流程图';
			lf.getSnapshot(exportName + `${new Date().getTime()}`);
		},
	});
	// 控制面板-发布
	// lf.extension.control.addItem({
	// 	iconClass: 'lf-control-publish',
	// 	title: '发布流程模板',
	// 	text: '发布',
	// 	onClick: () => {
	// 		publish(ruleFormRef.value);
	// 	},
	// });
	// 设置默认边
	lf.setDefaultEdgeType('hotline:transition');
	// 设置拖拽面板
	lf.extension.dndPanel.setPatternItems([
		{
			label: '选区',
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
			callback: () => {
				lf.extension.selectionSelect.openSelectionSelect();
				lf.once('selection:selected', () => {
					lf.extension.selectionSelect.closeSelectionSelect();
				});
			},
		},
		{
			type: 'hotline:start',
			text: '开始',
			label: '开始节点',
			properties: {
				stepType: 1, // 节点类型(开始1 结束2)
			},
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==',
		},
		{
			type: 'hotline:task',
			text: '流程节点',
			label: '流程节点',
			properties: {},
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
			className: 'important-node',
		},
		{
			type: 'hotline:end',
			text: '结束',
			label: '结束节点',
			properties: {
				stepType: 2, // 节点类型(开始1 结束2)
			},
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC',
		},
	]);
};
// 初始化事件
// 定义表单信息
const propertySettingRef = ref(null) as any;
// 当前操作节点/或边id
const currentOpId = ref('');
const nodes = ref<EmptyArrayType>([]);
const initEvent = () => {
	if (props.viewer) return;
	// 初始化事件
	const lf = unref(lfInstance);
	if (!lf) return;
	const eventCenter: any = lf.graphModel.eventCenter;
	// 空白区右键事件-弹出流程属性表单
	// eventCenter.on('blank:contextmenu', () => {
	//   propertySettingRef.value.show({
	//     name: lf.graphModel.name,
	//     code: lf.graphModel.code,
	//     version: lf.graphModel.version,
	//     description: lf.graphModel.description,
	//     moduleName: lf.graphModel.moduleName,
	//     type: 'process'
	//   })
	// })

	// 节点点击事件
	eventCenter.on('node:click', (args: any, data) => {
		if (['hotline:start', 'hotline:task', 'hotline:end'].includes(args.data.type)) {
			currentOpId.value = args.data.id;
			propertySettingRef.value.show({
				...args.data.properties,
				code: args.data.id,
				id: args.data.id,
				name: args.data.text?.value,
				type: args.data.type,
			});
		}
		nodes.value = lf.graphModel.nodes;
	});
	// 边点击事件
	// eventCenter.on('edge:click', (args: any) => {
	// console.log(args, 'args')
	// currentOpId.value = args.data.id
	// propertySettingRef.value.show({
	//   ...args.data.properties,
	//   id: args.data.id,
	//   name: args.data.text?.value,
	//   type: args.data.type
	// })
	// })
};
const closePage = () => {
	// 更新
	ElMessage.success('操作成功');
	// 关闭当前 tagsView
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	mittBus.emit('clearCache', 'systemWorkflow');
	router.push({
		name: 'systemWorkflow',
		state: {
			index: '1',
		},
	});
};
// 暂存（保存为草稿）
const saveOnly = throttle((formEl: FormInstance | undefined) => {
	// lfInstance.value?.getSnapshot(); // 下载为图片
	const lf = unref(lfInstance);
	if (!lf) return;
	if (!formEl) return;
	// 表单验证
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		// 流程模板属性 最外层
		Object.keys(form).forEach((key: string) => {
			// 监听属性变化 并保存
			lf.graphModel[key] = form[key];
		});
		const { submitData } = getGraphData();
		if (submitData.error) {
			//错误提示
			ElMessage.warning(submitData.error);
			return;
		}
		if (route.params.id) {
			workflowUpdate(submitData).then(() => {
				//更新
				closePage();
			});
		} else {
			workflowAdd(submitData).then(() => {
				//保存
				closePage();
			});
		}
		emits('on-save', getGraphData());
	});
}, 300);
// 重新渲染
const reRender = (data: any): void => {
	const lf = unref(lfInstance);
	if (!lf) return;
	lf.render(data);
	if (route.params.id) {
		nextTick(() => {
			// 最外层扩展属性赋值
			form.name = lf.graphModel.name;
			form.code = lf.graphModel.code;
			form.flowType = lf.graphModel.flowType;
			form.description = lf.graphModel.description;
			form.isMainHandlerShow = lf.graphModel.isMainHandlerShow;
			form.id = route.params.id;
			form.name = lf.graphModel.name;
		});
	}
};

// 处理当前节点属性值变化事件
const handlePropertyChange = (e: any) => {
	const lf = unref(lfInstance);
	if (!lf) return;
	if (([NodeTypeEnum.task, NodeTypeEnum.start, NodeTypeEnum.end] as NodeTypeEnum[]).includes(e.type)) {
		// 节点属性
		const nodeId = unref(currentOpId);
		// 节点信息
		if (e.propertyName === 'id') {
			// 更新唯一标识
			if (!lf.getNodeModelById(e.propertyValue)) {
				lf.changeNodeId(nodeId, e.propertyValue);
				currentOpId.value = e.propertyValue;
			}
		} else if (e.propertyName === 'name') {
			// 更新节点文本值
			lf.updateText(nodeId, e.propertyValue);
		} else {
			// 更新基础属性
			lf.setProperties(nodeId, {
				[e.propertyName]: e.propertyValue,
			});
		}
		emits('update:modelValue', getGraphData());
	}
};
/* 处理其他节点的属性变化 */
const handlePropertyChangeOther = (e: any) => {
	const lf = unref(lfInstance);
	if (!lf) return;
	if (([NodeTypeEnum.task, NodeTypeEnum.start, NodeTypeEnum.end] as NodeTypeEnum[]).includes(e.type)) {
		// 节点属性
		const nodeId = unref(e.id);
		// 节点信息
		if (e.propertyName === 'id') {
			// 更新唯一标识
			if (!lf.getNodeModelById(e.propertyValue)) {
				lf.changeNodeId(nodeId, e.propertyValue);
				currentOpId.value = e.propertyValue;
			}
		} else if (e.propertyName === 'name') {
			// 更新节点文本值
			lf.updateText(nodeId, e.propertyValue);
		} else {
			// 更新基础属性
			lf.setProperties(nodeId, {
				[e.propertyName]: e.propertyValue,
			});
		}
		emits('update:modelValue', getGraphData());
	}
};
/**
 * 获取流程数据
 */
const getGraphData = () => {
	const lf = unref(lfInstance);
	if (!lf) return {};
	return lf.getGraphData();
};
// 刷新导入下拉数据
const refreshImport = () => {
	//   return unref(importDataRef)?.refresh()
};
// 导入json
const importJson = (data: any) => {
	reRender(data);
};
const baseDataResult = ref<EmptyObjectType>({});
onMounted(async () => {
	// 获取页面基础数据
	const { result } = await baseData();
	baseDataResult.value = result;
	await init();
});

// 出提供给外部操作-$refs.xxx
defineExpose({
	getGraphData,
	refreshImport,
	importJson,
});
</script>

<style lang="scss">
.border {
	border: var(--el-border);
	border-radius: var(--el-border-radius-base);
	padding: 10px;
}

.el-step__icon-inner {
	font-size: var(--el-font-size-base) !important;
	font-weight: 700 !important;
}

.lf-menu {
	background-color: var(--el-color-white);
}

.lf-menu-item:hover {
	background-color: var(--hotline-color-menu-hover);
}

.lf-text-input {
	background-color: var(--el-color-white);
}

.lf-element-text {
	color: var(--hotline-color-text-main);
}

.lf-graph {
	background-color: var(--el-color-white) !important;
	color: var(--hotline-color-text-main);
}

.lf-control {
	background-color: var(--el-color-white) !important;
}

.custom-minimap {
	background-image: url('data:image/png;base64,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');
}

.lf-control-clear {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjQ1Nzg5MTYyODczIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwNDYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODk5LjEgODY5LjZsLTUzLTMwNS42SDg2NGMxNC40IDAgMjYtMTEuNiAyNi0yNlYzNDZjMC0xNC40LTExLjYtMjYtMjYtMjZINjE4VjEzOGMwLTE0LjQtMTEuNi0yNi0yNi0yNkg0MzJjLTE0LjQgMC0yNiAxMS42LTI2IDI2djE4MkgxNjBjLTE0LjQgMC0yNiAxMS42LTI2IDI2djE5MmMwIDE0LjQgMTEuNiAyNiAyNiAyNmgxNy45bC01MyAzMDUuNmMtMC4zIDEuNS0wLjQgMy0wLjQgNC40IDAgMTQuNCAxMS42IDI2IDI2IDI2aDcyM2MxLjUgMCAzLTAuMSA0LjQtMC40IDE0LjItMi40IDIzLjctMTUuOSAyMS4yLTMwek0yMDQgMzkwaDI3MlYxODJoNzJ2MjA4aDI3MnYxMDRIMjA0VjM5MHogbTQ2OCA0NDBWNjc0YzAtNC40LTMuNi04LTgtOGgtNDhjLTQuNCAwLTggMy42LTggOHYxNTZINDE2VjY3NGMwLTQuNC0zLjYtOC04LThoLTQ4Yy00LjQgMC04IDMuNi04IDh2MTU2SDIwMi44bDQ1LjEtMjYwSDc3Nmw0NS4xIDI2MEg2NzJ6IiBwLWlkPSIyMDQ3Ij48L3BhdGg+PC9zdmc+');
}

.lf-control-save {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAeFBMVEUAAAA0NDQzMzMyMjIzMzM0NDQzMzMzMzMzMzMzMzMyMjIzMzMyMjIyMjIzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMyMjIzMzMzMzMzMzMzMzMzMzM0NDQzMzMyMjIzMzM0NDQzMzOd5GGdAAAAJ3RSTlMAQL+AVSOtd6VgURjHHRH17dnPcPvls2pH4p+ZKYzcNJCHWgpmSzvtPOJXAAADgElEQVR42u3dyU7jQBSF4Ws7njPPI9DQ3ef937AFqHFVIA6xKzWg86+9+VSWypIXRxhjjDHGGGOMse83imyXiunSMpstYb+Hp7EYrBzCWfNKTFXFcNpAzHTAjXkqmcN9JiTwov6SDH7UV/ILvtRPUsGfeklieFQPSQmv6i4Zwq+6SlJoTfaL6MsSKEUdg1IcvTUwJdlAbXiUC2kQ6ZgGkfdMSTIoFSIWIWYlMzRNa6sQs5KldiBWIUYlIyjldiFGJRGUIruQdkmYkK8kYUK+kngDGR+j47gFclXiCaTAa8VlyHWJF5Ap3ptehlyXeABpnk8uQ65LnEO2aNpehlyXuIbkaMpbINcljiEFmorLkOuSh9otJEZT3AK5LnkKFPJJsgsV8kmShgo5l0TBQmTwUyAy8AeSoSm7GRL5A9EuxJAh2idKyBBZ439rCRoiu48LLXCInPDaSYKHSFolVSo/APIWIYQQEhhkAaXUwN+xwhHkGUq5dCqHUu4I8gdqtXSohlrlCFJDK3mObuw5gVbtCCJrGG0triAbGG3jDFKvYLBV7QwiCQyWiDtIvTJ5IA4h8hvG+i0uIZKYe7HcQmQBIy3ENUQGMNBA3ENkMEfP5gPxASIv+Qo9WuUv4gdEZFyu0bF1ORbxBvKGSR+jG3tM3xCeQbpFCCE3RgghhLRHCCGEtEcIIYS0RwghhLRHCCGEtBcgJCqTfdyr7LTZjt1CHhfZBGaKk60zSPq0hMmyyA0kmcJ0BxeQPe7Q0D4kxl1a2YZkuFMTu5AEdyu2CUlwxzJ7kL+4axtrkAJ3bTa2BNniziWWIHucNY17tcNZD5YgD9DKU+lZmkPvjxXII9TmIzHQaA61gxXIQr+/DDWB0tQK5AClSgxVQe3FBmSNpp0YawelkQ3IDE2xGCuG0tEGZIKmkxjrBKW/NiD61WWsBEoRIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQohpyAhKC18gCyiNbh9S2fsC2aNp2WHaZnL0A3KcoGnWZWxo6AdkCKWs07BYUbuH1AXUym6DXNMij9Q0SGQsHaKWF1NopaFOpJ01DHW07rwy0BnB8+JAhx0/VYU1RXuxQ3hjtF82D3OO9nPhDtJqZWFP0n70K8wR7fPiKshZ8/OGpfQp3TRD885azrJNGub0v9ZIGGOMMcYYY4yxb/cPDX+XlnDYr4YAAAAASUVORK5CYII=');
}
.lf-control-release {
	background-image: url('data:image/png;base64,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');
}
</style>