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