fix: 删除无用函数与信号,修复全屏bug

This commit is contained in:
SikongJueluo 2025-07-13 16:00:49 +08:00
parent a76ee74656
commit e38770a496
No known key found for this signature in database
2 changed files with 20 additions and 122 deletions

View File

@ -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"]),

View File

@ -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,8 +156,11 @@ 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];
} }
}
} }
// --- --- // --- ---
@ -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,