fix: 删除无用函数与信号,修复全屏bug
This commit is contained in:
parent
a76ee74656
commit
e38770a496
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container"
|
class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container flex flex-col select-none"
|
||||||
ref="canvasContainer"
|
ref="canvasContainer"
|
||||||
@mousedown="handleCanvasMouseDown"
|
@mousedown="handleCanvasMouseDown"
|
||||||
@mousedown.middle.prevent="startMiddleDrag"
|
@mousedown.middle.prevent="startMiddleDrag"
|
||||||
|
@ -38,13 +38,13 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
ref="canvas"
|
ref="canvas"
|
||||||
class="diagram-canvas"
|
class="diagram-canvas relative select-none"
|
||||||
:style="{
|
:style="{
|
||||||
transform: `translate(${componentManager.canvasPosition.x}px, ${componentManager.canvasPosition.y}px) scale(${componentManager.canvasScale.value})`,
|
transform: `translate(${componentManager.canvasPosition.x}px, ${componentManager.canvasPosition.y}px) scale(${componentManager.canvasScale.value})`,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<!-- 渲染连线 -->
|
<!-- 渲染连线 -->
|
||||||
<svg class="wires-layer" width="10000" height="10000">
|
<svg class="wires-layer absolute top-0 left-0 w-full h-full z-50" width="10000" height="10000">
|
||||||
<!-- 已完成的连线 -->
|
<!-- 已完成的连线 -->
|
||||||
<WireComponent
|
<WireComponent
|
||||||
v-for="(wire, index) in wireItems"
|
v-for="(wire, index) in wireItems"
|
||||||
|
@ -83,34 +83,24 @@
|
||||||
<div
|
<div
|
||||||
v-for="component in diagramParts"
|
v-for="component in diagramParts"
|
||||||
:key="component.id"
|
:key="component.id"
|
||||||
class="component-wrapper"
|
class="component-wrapper absolute p-0 inline-block overflow-visible select-none"
|
||||||
:class="{
|
:class="{
|
||||||
'component-hover': hoveredComponent === component.id,
|
'component-hover': hoveredComponent === component.id,
|
||||||
'component-selected': selectedComponentId === component.id,
|
'component-selected': selectedComponentId === component.id,
|
||||||
'component-disabled': !component.isOn,
|
'cursor-not-allowed grayscale-70 opacity-60': !component.isOn,
|
||||||
'component-hidepins': component.hidepins,
|
'component-hidepins': component.hidepins,
|
||||||
}"
|
}"
|
||||||
:style="{
|
:style="{
|
||||||
top: component.y + 'px',
|
top: component.y + 'px',
|
||||||
left: component.x + 'px',
|
left: component.x + 'px',
|
||||||
zIndex: component.index ?? 0,
|
zIndex: component.index ?? 0,
|
||||||
transform: component.rotate
|
transform: component.rotate ? `rotate(${component.rotate}deg)` : 'none',
|
||||||
? `rotate(${component.rotate}deg)`
|
|
||||||
: 'none',
|
|
||||||
opacity: component.isOn ? 1 : 0.6,
|
opacity: component.isOn ? 1 : 0.6,
|
||||||
display: 'block',
|
display: 'block',
|
||||||
}"
|
}"
|
||||||
@mousedown.left.stop="startComponentDrag($event, component)"
|
@mousedown.left.stop="startComponentDrag($event, component)"
|
||||||
@mouseover="
|
@mouseover="hoveredComponent = component.id"
|
||||||
(event) => {
|
@mouseleave="hoveredComponent = null"
|
||||||
hoveredComponent = component.id;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
@mouseleave="
|
|
||||||
(event) => {
|
|
||||||
hoveredComponent = null;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<!-- 动态渲染组件 -->
|
<!-- 动态渲染组件 -->
|
||||||
<component
|
<component
|
||||||
|
@ -219,10 +209,7 @@ function handleContextMenu(e: MouseEvent) {
|
||||||
|
|
||||||
// 定义组件发出的事件
|
// 定义组件发出的事件
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
"diagram-updated",
|
|
||||||
"toggle-doc-panel",
|
"toggle-doc-panel",
|
||||||
"wire-created",
|
|
||||||
"wire-deleted",
|
|
||||||
"open-components",
|
"open-components",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
@ -615,9 +602,6 @@ function onComponentDrag(e: MouseEvent) {
|
||||||
y: Math.round(newY),
|
y: Math.round(newY),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 通知图表已更新
|
|
||||||
emit("diagram-updated", diagramData.value);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 停止拖拽组件
|
// 停止拖拽组件
|
||||||
|
@ -653,7 +637,6 @@ function updateComponentProp(
|
||||||
propName,
|
propName,
|
||||||
value,
|
value,
|
||||||
);
|
);
|
||||||
emit("diagram-updated", diagramData.value);
|
|
||||||
saveDiagramData(diagramData.value);
|
saveDiagramData(diagramData.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -832,10 +815,6 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
||||||
connections: [...diagramData.value.connections, newConnection],
|
connections: [...diagramData.value.connections, newConnection],
|
||||||
};
|
};
|
||||||
|
|
||||||
// 通知连线创建
|
|
||||||
emit("wire-created", newConnection);
|
|
||||||
emit("diagram-updated", diagramData.value);
|
|
||||||
|
|
||||||
// 保存图表数据
|
// 保存图表数据
|
||||||
saveDiagramData(diagramData.value);
|
saveDiagramData(diagramData.value);
|
||||||
|
|
||||||
|
@ -882,14 +861,6 @@ function onCreatingWireMouseMove(e: MouseEvent) {
|
||||||
updateMousePosition(e);
|
updateMousePosition(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除连线
|
|
||||||
function deleteWire(wireIndex: number) {
|
|
||||||
diagramData.value = deleteConnection(diagramData.value, wireIndex);
|
|
||||||
emit("wire-deleted", wireIndex);
|
|
||||||
emit("diagram-updated", diagramData.value);
|
|
||||||
saveDiagramData(diagramData.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除组件
|
// 删除组件
|
||||||
function deleteComponent(componentId: string) {
|
function deleteComponent(componentId: string) {
|
||||||
diagramData.value = deletePart(diagramData.value, componentId);
|
diagramData.value = deletePart(diagramData.value, componentId);
|
||||||
|
@ -897,7 +868,6 @@ function deleteComponent(componentId: string) {
|
||||||
if (componentManager) {
|
if (componentManager) {
|
||||||
componentManager.deleteComponent(componentId);
|
componentManager.deleteComponent(componentId);
|
||||||
}
|
}
|
||||||
emit("diagram-updated", diagramData.value);
|
|
||||||
saveDiagramData(diagramData.value);
|
saveDiagramData(diagramData.value);
|
||||||
|
|
||||||
// 清除选中状态
|
// 清除选中状态
|
||||||
|
@ -955,9 +925,6 @@ function handleFileSelected(event: Event) {
|
||||||
// 保存到本地文件
|
// 保存到本地文件
|
||||||
saveDiagramData(diagramData.value);
|
saveDiagramData(diagramData.value);
|
||||||
|
|
||||||
// 发出更新事件
|
|
||||||
emit("diagram-updated", diagramData.value);
|
|
||||||
|
|
||||||
alertStore?.show(`成功导入diagram文件`, "success");
|
alertStore?.show(`成功导入diagram文件`, "success");
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("解析JSON文件出错:", error);
|
console.error("解析JSON文件出错:", error);
|
||||||
|
@ -1029,7 +996,6 @@ onMounted(async () => {
|
||||||
updateDiagramDataDirectly: (data: DiagramData) => {
|
updateDiagramDataDirectly: (data: DiagramData) => {
|
||||||
diagramData.value = data;
|
diagramData.value = data;
|
||||||
saveDiagramData(data);
|
saveDiagramData(data);
|
||||||
emit("diagram-updated", data);
|
|
||||||
},
|
},
|
||||||
getCanvasPosition: () => componentManager.getCanvasPosition(),
|
getCanvasPosition: () => componentManager.getCanvasPosition(),
|
||||||
getScale: () => componentManager.getCanvasScale(),
|
getScale: () => componentManager.getCanvasScale(),
|
||||||
|
@ -1096,9 +1062,6 @@ function updateDiagramDataDirectly(data: DiagramData) {
|
||||||
|
|
||||||
diagramData.value = data;
|
diagramData.value = data;
|
||||||
saveDiagramData(data);
|
saveDiagramData(data);
|
||||||
|
|
||||||
// 发出diagram-updated事件
|
|
||||||
emit("diagram-updated", data);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 暴露方法给父组件
|
// 暴露方法给父组件
|
||||||
|
@ -1119,48 +1082,23 @@ watch(
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* 基础容器样式 - 使用 Tailwind 类替代 */
|
||||||
.diagram-container {
|
.diagram-container {
|
||||||
position: relative;
|
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-size:
|
|
||||||
20px 20px,
|
|
||||||
20px 20px,
|
|
||||||
100px 100px,
|
|
||||||
100px 100px;
|
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 画布样式 - 部分保留自定义属性 */
|
||||||
.diagram-canvas {
|
.diagram-canvas {
|
||||||
position: relative;
|
|
||||||
width: 10000px;
|
width: 10000px;
|
||||||
height: 10000px;
|
height: 10000px;
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 连线层样式 */
|
/* 连线层样式 */
|
||||||
.wires-layer {
|
.wires-layer {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
/* 修复:允许线被点击 */
|
|
||||||
z-index: 50;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
/* 确保超出SVG范围的内容也能显示 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wires-layer path {
|
.wires-layer path {
|
||||||
|
@ -1168,71 +1106,34 @@ watch(
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 元器件容器样式 */
|
/* 组件容器样式 */
|
||||||
.component-wrapper {
|
.component-wrapper {
|
||||||
position: absolute;
|
|
||||||
padding: 0;
|
|
||||||
/* 移除内边距,确保元素大小与内容完全匹配 */
|
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
/* 使用content-box确保内容尺寸不受padding影响 */
|
|
||||||
display: inline-block;
|
|
||||||
overflow: visible;
|
|
||||||
/* 允许内容溢出(用于显示边框) */
|
|
||||||
cursor: move;
|
cursor: move;
|
||||||
/* 显示移动光标 */
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 悬停状态 - 使用outline而非伪元素 */
|
/* 悬停状态 */
|
||||||
.component-hover {
|
.component-hover {
|
||||||
outline: 2px dashed #3498db;
|
outline: 2px dashed #3498db;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 选中状态 - 使用outline而非伪元素 */
|
/* 选中状态 */
|
||||||
.component-selected {
|
.component-selected {
|
||||||
outline: 3px dashed;
|
outline: 3px dashed;
|
||||||
outline-color: #e74c3c #f39c12 #3498db #2ecc71;
|
outline-color: #e74c3c #f39c12 #3498db #2ecc71;
|
||||||
outline-offset: 3px;
|
outline-offset: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 禁用状态 */
|
/* SVG 交互样式 */
|
||||||
.component-disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
filter: grayscale(70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏引脚状态 */
|
|
||||||
.component-hidepins :deep([data-pin-wrapper]) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 深度选择器 - 默认阻止SVG内部元素的鼠标事件,但允许SVG本身和特定交互元素 */
|
|
||||||
.component-wrapper :deep(svg) {
|
.component-wrapper :deep(svg) {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
/* 确保SVG本身可以接收鼠标事件用于拖拽 */
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.component-wrapper
|
.component-wrapper :deep(svg *:not([class*="interactive"]):not(rect.glow):not(circle[fill-opacity]):not([fill-opacity])) {
|
||||||
:deep(
|
|
||||||
svg
|
|
||||||
*:not([class*="interactive"]):not(rect.glow):not(
|
|
||||||
circle[fill-opacity]
|
|
||||||
):not([fill-opacity])
|
|
||||||
) {
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
/* 非交互元素不接收鼠标事件 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 允许特定SVG元素接收鼠标事件,用于交互 */
|
|
||||||
.component-wrapper :deep(svg circle[fill-opacity]),
|
.component-wrapper :deep(svg circle[fill-opacity]),
|
||||||
.component-wrapper :deep(svg rect[fill-opacity]),
|
.component-wrapper :deep(svg rect[fill-opacity]),
|
||||||
.component-wrapper :deep(svg rect[class*="glow"]),
|
.component-wrapper :deep(svg rect[class*="glow"]),
|
||||||
|
|
|
@ -29,7 +29,6 @@
|
||||||
<DiagramCanvas
|
<DiagramCanvas
|
||||||
ref="diagramCanvas"
|
ref="diagramCanvas"
|
||||||
:showDocPanel="showDocPanel"
|
:showDocPanel="showDocPanel"
|
||||||
@diagram-updated="handleDiagramUpdated"
|
|
||||||
@open-components="openComponentsMenu"
|
@open-components="openComponentsMenu"
|
||||||
@toggle-doc-panel="toggleDocPanel"
|
@toggle-doc-panel="toggleDocPanel"
|
||||||
/>
|
/>
|
||||||
|
@ -157,9 +156,12 @@ function handleHorizontalSplitterResize(sizes: number[]) {
|
||||||
|
|
||||||
function handleVerticalSplitterResize(sizes: number[]) {
|
function handleVerticalSplitterResize(sizes: number[]) {
|
||||||
if (sizes && sizes.length > 0) {
|
if (sizes && sizes.length > 0) {
|
||||||
|
// 只在非全屏状态下保存分栏大小,避免全屏时的100%被保存
|
||||||
|
if (!isBottomBarFullscreen.value) {
|
||||||
verticalSplitterSize.value = sizes[0];
|
verticalSplitterSize.value = sizes[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// --- 实验板申请对话框 ---
|
// --- 实验板申请对话框 ---
|
||||||
const showRequestBoardDialog = ref(false);
|
const showRequestBoardDialog = ref(false);
|
||||||
|
@ -217,11 +219,6 @@ function openComponentsMenu() {
|
||||||
showComponentsMenu.value = true;
|
showComponentsMenu.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理图表数据更新事件
|
|
||||||
function handleDiagramUpdated(data: DiagramData) {
|
|
||||||
console.log("Diagram data updated:", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新组件属性的方法 - 委托给componentManager
|
// 更新组件属性的方法 - 委托给componentManager
|
||||||
function updateComponentProp(
|
function updateComponentProp(
|
||||||
componentId: string,
|
componentId: string,
|
||||||
|
|
Loading…
Reference in New Issue