Compare commits
No commits in common. "1c75aa621a969e8474f22487dcfa8c1034d1e386" and "b3a5342d6bda1627d475c4ed84513bbfa98277a3" have entirely different histories.
1c75aa621a
...
b3a5342d6b
|
|
@ -8,9 +8,6 @@
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
// ReSharper disable InconsistentNaming
|
// ReSharper disable InconsistentNaming
|
||||||
|
|
||||||
import { batchSetConstraintStates, notifyConstraintChange } from './stores/constraints';
|
|
||||||
import type { ConstraintLevel } from './stores/constraints';
|
|
||||||
|
|
||||||
export class Client {
|
export class Client {
|
||||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||||
private baseUrl: string;
|
private baseUrl: string;
|
||||||
|
|
@ -870,56 +867,3 @@ function throwException(message: string, status: number, response: string, heade
|
||||||
else
|
else
|
||||||
throw new ApiException(message, status, response, headers, null);
|
throw new ApiException(message, status, response, headers, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 约束通信相关方法
|
|
||||||
export function receiveConstraintUpdates(constraints: Record<string, ConstraintLevel>) {
|
|
||||||
// 批量更新约束状态
|
|
||||||
batchSetConstraintStates(constraints);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function sendConstraintUpdate(constraint: string, level: ConstraintLevel) {
|
|
||||||
// 向后端发送约束状态变化
|
|
||||||
console.log(`发送约束 ${constraint} 状态变化为 ${level}`);
|
|
||||||
|
|
||||||
// TODO: 实际的WebSocket或HTTP请求发送约束变化
|
|
||||||
// 例如:
|
|
||||||
// socket.emit('constraintUpdate', { constraint, level });
|
|
||||||
// 或
|
|
||||||
// fetch('/api/constraints', {
|
|
||||||
// method: 'POST',
|
|
||||||
// body: JSON.stringify({ constraint, level }),
|
|
||||||
// headers: { 'Content-Type': 'application/json' }
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化约束通信
|
|
||||||
export function initConstraintCommunication() {
|
|
||||||
// 监听服务器发来的约束状态变化
|
|
||||||
// 示例:
|
|
||||||
// socket.on('constraintUpdates', (data) => {
|
|
||||||
// receiveConstraintUpdates(data);
|
|
||||||
// });
|
|
||||||
|
|
||||||
// 模拟接收一些初始约束状态
|
|
||||||
setTimeout(() => {
|
|
||||||
receiveConstraintUpdates({
|
|
||||||
'A1': 'high',
|
|
||||||
'A2': 'low',
|
|
||||||
'A3': 'undefined'
|
|
||||||
});
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 覆盖全局notifyConstraintChange，加入发送逻辑
|
|
||||||
const originalNotifyConstraintChange = notifyConstraintChange;
|
|
||||||
const wrappedNotifyConstraintChange = (constraint: string, level: ConstraintLevel) => {
|
|
||||||
// 调用原始方法更新本地状态
|
|
||||||
originalNotifyConstraintChange(constraint, level);
|
|
||||||
|
|
||||||
// 向后端发送更新
|
|
||||||
sendConstraintUpdate(constraint, level);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 替换全局方法
|
|
||||||
(window as any).__notifyConstraintChange = notifyConstraintChange;
|
|
||||||
(window as any).notifyConstraintChange = wrappedNotifyConstraintChange;
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
.diagram-canvas {
|
||||||
|
position: relative;
|
||||||
|
width: 4000px;
|
||||||
|
height: 4000px;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 将网格线应用到容器而不是画布上，确保覆盖整个可视区域 */
|
||||||
|
.flex-1.min-w-\[60\%\].bg-base-200.relative.overflow-auto {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(to right, rgba(80, 80, 80, 0.2) 100px, transparent 100px),
|
||||||
|
linear-gradient(to bottom, rgba(80, 80, 80, 0.2) 100px, transparent 100px);
|
||||||
|
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 为黑暗模式设置不同的网格线颜色 */
|
||||||
|
:root[data-theme="dark"] .flex-1.min-w-\[60\%\].bg-base-200.relative.overflow-auto {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(to right, rgba(180, 180, 180, 0.15) 100px, transparent 100px),
|
||||||
|
linear-gradient(to bottom, rgba(180, 180, 180, 0.15) 100px, transparent 100px);
|
||||||
|
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 禁用滚动条 */
|
||||||
|
.flex-1.min-w-\[60\%\].bg-base-200.relative.overflow-auto::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome, Safari, Opera */
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-1.min-w-\[60\%\].bg-base-200.relative.overflow-auto {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 元器件容器样式 */
|
||||||
|
.component-wrapper {
|
||||||
|
position: relative;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block; /* 确保元素宽度基于内容 */
|
||||||
|
max-width: fit-content; /* 强制宽度适应内容 */
|
||||||
|
max-height: fit-content; /* 强制高度适应内容 */
|
||||||
|
overflow: visible; /* 允许内容溢出（用于显示边框） */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停状态 */
|
||||||
|
.component-hover::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
left: -4px;
|
||||||
|
right: -4px;
|
||||||
|
bottom: -4px;
|
||||||
|
border: 3px dashed #3498db;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中状态 */
|
||||||
|
.component-selected::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
left: -4px;
|
||||||
|
right: -4px;
|
||||||
|
bottom: -4px;
|
||||||
|
border: 4px dashed #e74c3c;
|
||||||
|
border-color: #e74c3c #f39c12 #3498db #2ecc71;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
:style="{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})` }"> <!-- 渲染连线 -->
|
:style="{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})` }"> <!-- 渲染连线 -->
|
||||||
<svg class="wires-layer" width="4000" height="4000">
|
<svg class="wires-layer" width="4000" height="4000">
|
||||||
<!-- 已完成的连线 -->
|
<!-- 已完成的连线 -->
|
||||||
<WireComponent
|
<Wire
|
||||||
v-for="wire in wires"
|
v-for="wire in wires"
|
||||||
:key="wire.id"
|
:key="wire.id"
|
||||||
:id="wire.id"
|
:id="wire.id"
|
||||||
|
|
@ -19,14 +19,16 @@
|
||||||
:end-y="wire.endY"
|
:end-y="wire.endY"
|
||||||
:stroke-color="wire.color || '#4a5568'"
|
:stroke-color="wire.color || '#4a5568'"
|
||||||
:stroke-width="2"
|
:stroke-width="2"
|
||||||
:is-active="false"
|
:is-active="wire.isActive"
|
||||||
:start-component-id="wire.startComponentId"
|
:start-component-id="wire.startComponentId"
|
||||||
|
:start-pin-label="wire.startPinLabel"
|
||||||
:end-component-id="wire.endComponentId"
|
:end-component-id="wire.endComponentId"
|
||||||
:constraint="wire.constraint"
|
:end-pin-label="wire.endPinLabel"
|
||||||
|
@click="handleWireClick(wire)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 正在创建的连线 -->
|
<!-- 正在创建的连线 -->
|
||||||
<WireComponent
|
<Wire
|
||||||
v-if="isCreatingWire"
|
v-if="isCreatingWire"
|
||||||
id="temp-wire"
|
id="temp-wire"
|
||||||
:start-x="creatingWireStart.x"
|
:start-x="creatingWireStart.x"
|
||||||
|
|
@ -56,7 +58,7 @@
|
||||||
@mouseleave="hoveredComponent = null"><!-- 动态渲染组件 --> <component
|
@mouseleave="hoveredComponent = null"><!-- 动态渲染组件 --> <component
|
||||||
:is="getComponentDefinition(component.type)"
|
:is="getComponentDefinition(component.type)"
|
||||||
v-if="props.componentModules[component.type]"
|
v-if="props.componentModules[component.type]"
|
||||||
v-bind="prepareComponentProps(component.props || {}, component.id)"
|
v-bind="prepareComponentProps(component.props || {})"
|
||||||
@update:bindKey="(value: string) => updateComponentProp(component.id, 'bindKey', value)"
|
@update:bindKey="(value: string) => updateComponentProp(component.id, 'bindKey', value)"
|
||||||
@pin-click="(pinInfo: any) => handlePinClick(component.id, pinInfo, pinInfo.originalEvent)"
|
@pin-click="(pinInfo: any) => handlePinClick(component.id, pinInfo, pinInfo.originalEvent)"
|
||||||
:ref="(el: any) => { if (el) componentRefs[component.id] = el; }"
|
:ref="(el: any) => { if (el) componentRefs[component.id] = el; }"
|
||||||
|
|
@ -78,16 +80,7 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||||
import WireComponent from '@/components/equipments/Wire.vue';
|
import Wire from '@/components/Wire.vue';
|
||||||
import { wires, addWire, deleteWire, updateWiresConstraintByPin, findWiresByPin, isCreatingWire, creatingWireStart, creatingWireStartInfo, mousePosition, resetWireCreation, setWireCreationStart, setMousePosition } from './wireManager';
|
|
||||||
import type { WireItem } from './wireManager';
|
|
||||||
|
|
||||||
// 右键菜单处理函数（如无特殊需求可为空实现）
|
|
||||||
function handleContextMenu(e: MouseEvent) {
|
|
||||||
// 可根据需要自定义右键菜单逻辑
|
|
||||||
// 目前只是阻止默认行为
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义组件接受的属性
|
// 定义组件接受的属性
|
||||||
interface ComponentItem {
|
interface ComponentItem {
|
||||||
|
|
@ -177,10 +170,19 @@ const getComponentDefinition = (type: string) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
// 准备组件属性，确保类型正确
|
// 准备组件属性，确保类型正确
|
||||||
function prepareComponentProps(props: Record<string, any>, componentId?: string): Record<string, any> {
|
function prepareComponentProps(props: Record<string, any>): Record<string, any> {
|
||||||
const result: Record<string, any> = { ...props };
|
const result: Record<string, any> = {};
|
||||||
if (componentId) {
|
for (const key in props) {
|
||||||
result.componentId = componentId;
|
let value = props[key];
|
||||||
|
// 只要不是 null/undefined 且不是 string，就强制转字符串
|
||||||
|
if (
|
||||||
|
(key === 'style' || key === 'direction' || key === 'type') &&
|
||||||
|
value != null &&
|
||||||
|
typeof value !== 'string'
|
||||||
|
) {
|
||||||
|
value = String(value);
|
||||||
|
}
|
||||||
|
result[key] = value;
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
@ -349,19 +351,6 @@ function stopComponentDrag() {
|
||||||
|
|
||||||
// 更新组件属性
|
// 更新组件属性
|
||||||
function updateComponentProp(componentId: string, propName: string, value: any) {
|
function updateComponentProp(componentId: string, propName: string, value: any) {
|
||||||
// 如果是引脚约束变更，自动调用updatePinConstraint
|
|
||||||
if (propName === 'constraint') {
|
|
||||||
// 查找该组件的Pin label（假设label唯一，或可扩展为多Pin）
|
|
||||||
const componentRef = componentRefs.value[componentId];
|
|
||||||
if (componentRef && componentRef.getInfo) {
|
|
||||||
const pinInfo = componentRef.getInfo();
|
|
||||||
if (pinInfo) {
|
|
||||||
updatePinConstraint(componentId, value);
|
|
||||||
return; // 已处理，无需再emit
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 其它属性正常emit
|
|
||||||
emit('update-component-prop', { id: componentId, propName, value });
|
emit('update-component-prop', { id: componentId, propName, value });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -374,17 +363,6 @@ function getComponentRef(componentId: string) {
|
||||||
return componentRefs.value[component.id] || null;
|
return componentRefs.value[component.id] || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取Wire组件引用
|
|
||||||
function getWireRef(wireId: string) {
|
|
||||||
// 在SVG中查找Wire组件
|
|
||||||
const wire = document.querySelector(`[data-wire-id="${wireId}"]`);
|
|
||||||
if (wire && '__vueParentInstance' in wire) {
|
|
||||||
// @ts-ignore - 访问Vue内部属性
|
|
||||||
return wire.__vueParentInstance?.component?.exposed;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暴露给父组件的方法
|
// 暴露给父组件的方法
|
||||||
defineExpose({
|
defineExpose({
|
||||||
getComponentRef,
|
getComponentRef,
|
||||||
|
|
@ -393,18 +371,170 @@ defineExpose({
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- 连线状态 ---
|
// --- 连线状态 ---
|
||||||
// 处理连线创建事件
|
interface WireItem {
|
||||||
function handleWireCreated(wireData: any) {
|
id: string;
|
||||||
addWire(wireData);
|
startX: number;
|
||||||
emit('wire-created', wireData);
|
startY: number;
|
||||||
|
endX: number;
|
||||||
|
endY: number;
|
||||||
|
startComponentId: string;
|
||||||
|
startPinLabel: string;
|
||||||
|
endComponentId?: string;
|
||||||
|
endPinLabel?: string;
|
||||||
|
color?: string;
|
||||||
|
isActive?: boolean;
|
||||||
|
constraint?: string;
|
||||||
}
|
}
|
||||||
// 删除连线
|
|
||||||
function handleWireDeleted(wireId: string) {
|
const wires = ref<WireItem[]>([]);
|
||||||
deleteWire(wireId);
|
const isCreatingWire = ref(false);
|
||||||
emit('wire-deleted', wireId);
|
const creatingWireStart = reactive({ x: 0, y: 0 });
|
||||||
|
const creatingWireStartInfo = reactive({
|
||||||
|
componentId: '',
|
||||||
|
pinLabel: '',
|
||||||
|
constraint: ''
|
||||||
|
});
|
||||||
|
const mousePosition = reactive({ x: 0, y: 0 });
|
||||||
|
|
||||||
|
// 更新鼠标位置
|
||||||
|
function updateMousePosition(e: MouseEvent) {
|
||||||
|
if (!canvasContainer.value) return;
|
||||||
|
|
||||||
|
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||||||
|
mousePosition.x = (e.clientX - containerRect.left - position.x) / scale.value;
|
||||||
|
mousePosition.y = (e.clientY - containerRect.top - position.y) / scale.value;
|
||||||
}
|
}
|
||||||
// 更新Pin的约束时同步Wire
|
|
||||||
function updatePinConstraint(componentId: string, constraint: string) {
|
// 处理Pin点击事件
|
||||||
|
function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
||||||
|
if (!canvasContainer.value) return;
|
||||||
|
|
||||||
|
// 获取容器位置
|
||||||
|
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||||||
|
|
||||||
|
// 更新鼠标位置 (用于跟踪临时连线)
|
||||||
|
updateMousePosition(event);
|
||||||
|
|
||||||
|
// 检查 pinInfo 是否有效
|
||||||
|
if (!pinInfo || !pinInfo.label) {
|
||||||
|
console.error('无效的针脚信息:', pinInfo);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 针脚在页面上的绝对位置
|
||||||
|
if (!pinInfo.position) {
|
||||||
|
console.error('针脚信息中缺少位置数据:', pinInfo);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pinPagePosition = pinInfo.position;
|
||||||
|
console.log(`针脚 ${pinInfo.label} 的页面坐标:`, pinPagePosition);
|
||||||
|
|
||||||
|
// 将针脚页面位置转换为画布坐标系中的位置
|
||||||
|
const pinCanvasX = (pinPagePosition.x - containerRect.left - position.x) / scale.value;
|
||||||
|
const pinCanvasY = (pinPagePosition.y - containerRect.top - position.y) / scale.value;
|
||||||
|
console.log(`针脚 ${pinInfo.label} 的画布坐标:`, { x: pinCanvasX, y: pinCanvasY });
|
||||||
|
|
||||||
|
if (!isCreatingWire.value) {
|
||||||
|
// 开始创建连线
|
||||||
|
isCreatingWire.value = true;
|
||||||
|
// 使用针脚的实际位置作为连线起点
|
||||||
|
creatingWireStart.x = pinCanvasX;
|
||||||
|
creatingWireStart.y = pinCanvasY;
|
||||||
|
creatingWireStartInfo.componentId = componentId;
|
||||||
|
creatingWireStartInfo.pinLabel = pinInfo.label;
|
||||||
|
creatingWireStartInfo.constraint = pinInfo.constraint;
|
||||||
|
|
||||||
|
console.log(`开始创建连线，起点针脚: ${componentId}/${pinInfo.label}, 位置: (${pinCanvasX}, ${pinCanvasY})`);
|
||||||
|
|
||||||
|
// 添加鼠标移动监听
|
||||||
|
document.addEventListener('mousemove', onCreatingWireMouseMove);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// 完成连线
|
||||||
|
if (componentId === creatingWireStartInfo.componentId && pinInfo.label === creatingWireStartInfo.pinLabel) {
|
||||||
|
// 如果点了同一个Pin，取消连线
|
||||||
|
cancelWireCreation();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查约束条件
|
||||||
|
const startConstraint = creatingWireStartInfo.constraint;
|
||||||
|
const endConstraint = pinInfo.constraint;
|
||||||
|
|
||||||
|
if (startConstraint && endConstraint && startConstraint !== endConstraint) {
|
||||||
|
// 两个Pin都有约束，但约束不同，需要询问用户选择哪个约束
|
||||||
|
promptForConstraintSelection(
|
||||||
|
componentId,
|
||||||
|
pinInfo,
|
||||||
|
startConstraint,
|
||||||
|
endConstraint
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// 确定最终约束
|
||||||
|
let finalConstraint = '';
|
||||||
|
|
||||||
|
if (startConstraint) {
|
||||||
|
finalConstraint = startConstraint;
|
||||||
|
} else if (endConstraint) {
|
||||||
|
finalConstraint = endConstraint;
|
||||||
|
} else {
|
||||||
|
// 两个Pin都没有约束，生成随机约束
|
||||||
|
finalConstraint = generateRandomConstraint();
|
||||||
|
}
|
||||||
|
// 完成连线
|
||||||
|
completeWireCreation(
|
||||||
|
componentId,
|
||||||
|
pinInfo.label,
|
||||||
|
finalConstraint,
|
||||||
|
pinInfo
|
||||||
|
);
|
||||||
|
|
||||||
|
// 更新两个Pin的约束
|
||||||
|
updatePinConstraint(creatingWireStartInfo.componentId, creatingWireStartInfo.pinLabel, finalConstraint);
|
||||||
|
updatePinConstraint(componentId, pinInfo.label, finalConstraint);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成随机约束名
|
||||||
|
function generateRandomConstraint() {
|
||||||
|
const randomId = Math.floor(Math.random() * 1000000);
|
||||||
|
return `$auto_constraint_${randomId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 询问用户选择约束
|
||||||
|
function promptForConstraintSelection(
|
||||||
|
endComponentId: string,
|
||||||
|
endPinInfo: any,
|
||||||
|
startConstraint: string,
|
||||||
|
endConstraint: string
|
||||||
|
) {
|
||||||
|
// 在实际应用中，这里可以使用Modal对话框等UI组件
|
||||||
|
// 这里简化为使用浏览器的confirm
|
||||||
|
const useStartConstraint = confirm(
|
||||||
|
`连接两个不同约束的Pin:\n` +
|
||||||
|
`- 起点约束: ${startConstraint}\n` +
|
||||||
|
`- 终点约束: ${endConstraint}\n\n` +
|
||||||
|
`点击"确定"使用起点约束，点击"取消"使用终点约束。`
|
||||||
|
);
|
||||||
|
|
||||||
|
const finalConstraint = useStartConstraint ? startConstraint : endConstraint;
|
||||||
|
// 完成连线
|
||||||
|
completeWireCreation(
|
||||||
|
endComponentId,
|
||||||
|
endPinInfo.label,
|
||||||
|
finalConstraint,
|
||||||
|
endPinInfo
|
||||||
|
);
|
||||||
|
|
||||||
|
// 更新两个Pin的约束
|
||||||
|
updatePinConstraint(creatingWireStartInfo.componentId, creatingWireStartInfo.pinLabel, finalConstraint);
|
||||||
|
updatePinConstraint(endComponentId, endPinInfo.label, finalConstraint);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新Pin的约束
|
||||||
|
function updatePinConstraint(componentId: string, pinLabel: string, constraint: string) {
|
||||||
// 通过组件ID获取组件实例
|
// 通过组件ID获取组件实例
|
||||||
const component = props.components.find(c => c.id === componentId);
|
const component = props.components.find(c => c.id === componentId);
|
||||||
if (!component) return;
|
if (!component) return;
|
||||||
|
|
@ -416,7 +546,7 @@ function updatePinConstraint(componentId: string, constraint: string) {
|
||||||
// 更新组件属性
|
// 更新组件属性
|
||||||
if (component.props && componentRef.getInfo) {
|
if (component.props && componentRef.getInfo) {
|
||||||
const pinInfo = componentRef.getInfo();
|
const pinInfo = componentRef.getInfo();
|
||||||
if (pinInfo) {
|
if (pinInfo && pinInfo.label === pinLabel) {
|
||||||
emit('update-component-prop', {
|
emit('update-component-prop', {
|
||||||
id: componentId,
|
id: componentId,
|
||||||
propName: 'constraint',
|
propName: 'constraint',
|
||||||
|
|
@ -424,114 +554,10 @@ function updatePinConstraint(componentId: string, constraint: string) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 同步所有相关Wire的constraint
|
|
||||||
updateWiresConstraintByPin(componentId, constraint);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新鼠标位置
|
|
||||||
function updateMousePosition(e: MouseEvent) {
|
|
||||||
if (!canvasContainer.value) return;
|
|
||||||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
|
||||||
setMousePosition(
|
|
||||||
(e.clientX - containerRect.left - position.x) / scale.value,
|
|
||||||
(e.clientY - containerRect.top - position.y) / scale.value
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理Pin点击事件
|
|
||||||
function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
|
||||||
if (!canvasContainer.value) return;
|
|
||||||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
|
||||||
updateMousePosition(event);
|
|
||||||
if (!pinInfo || !pinInfo.label) {
|
|
||||||
console.error('无效的针脚信息:', pinInfo);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!pinInfo.position) {
|
|
||||||
console.error('针脚信息中缺少位置数据:', pinInfo);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const pinPagePosition = pinInfo.position;
|
|
||||||
const pinCanvasX = (pinPagePosition.x - containerRect.left - position.x) / scale.value;
|
|
||||||
const pinCanvasY = (pinPagePosition.y - containerRect.top - position.y) / scale.value;
|
|
||||||
if (!isCreatingWire.value) {
|
|
||||||
setWireCreationStart(pinCanvasX, pinCanvasY, componentId, pinInfo.label, pinInfo.constraint);
|
|
||||||
document.addEventListener('mousemove', onCreatingWireMouseMove);
|
|
||||||
} else {
|
|
||||||
if (componentId === creatingWireStartInfo.componentId && pinInfo.label === creatingWireStartInfo.pinLabel) {
|
|
||||||
cancelWireCreation();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 获取起点和终点的约束
|
|
||||||
const startConstraint = creatingWireStartInfo.constraint || '';
|
|
||||||
const endConstraint = pinInfo.constraint || '';
|
|
||||||
let finalConstraint = '';
|
|
||||||
// 如果两端约束完全一致，直接用该约束，不弹窗
|
|
||||||
if (startConstraint && endConstraint && startConstraint === endConstraint) {
|
|
||||||
finalConstraint = startConstraint;
|
|
||||||
} else {
|
|
||||||
// 确定最终要使用的约束
|
|
||||||
let replacedConstraint: string | null = null;
|
|
||||||
let newConstraint: string | null = null;
|
|
||||||
if (startConstraint && endConstraint) {
|
|
||||||
const isStartSystemConstraint = startConstraint.startsWith('$');
|
|
||||||
const isEndSystemConstraint = endConstraint.startsWith('$');
|
|
||||||
if (!isStartSystemConstraint && isEndSystemConstraint) {
|
|
||||||
finalConstraint = startConstraint;
|
|
||||||
replacedConstraint = endConstraint;
|
|
||||||
newConstraint = startConstraint;
|
|
||||||
} else if (isStartSystemConstraint && !isEndSystemConstraint) {
|
|
||||||
finalConstraint = endConstraint;
|
|
||||||
replacedConstraint = startConstraint;
|
|
||||||
newConstraint = endConstraint;
|
|
||||||
} else if (isStartSystemConstraint && isEndSystemConstraint) {
|
|
||||||
finalConstraint = Math.random() < 0.5 ? startConstraint : endConstraint;
|
|
||||||
replacedConstraint = (finalConstraint === startConstraint) ? endConstraint : startConstraint;
|
|
||||||
newConstraint = finalConstraint;
|
|
||||||
} else {
|
|
||||||
const userChoice = confirm(`针脚约束冲突：${startConstraint} 和 ${endConstraint}。点击"确定"保留${startConstraint}，点击"取消"保留${endConstraint}`);
|
|
||||||
finalConstraint = userChoice ? startConstraint : endConstraint;
|
|
||||||
replacedConstraint = userChoice ? endConstraint : startConstraint;
|
|
||||||
newConstraint = finalConstraint;
|
|
||||||
}
|
|
||||||
} else if (startConstraint) {
|
|
||||||
finalConstraint = startConstraint;
|
|
||||||
} else if (endConstraint) {
|
|
||||||
finalConstraint = endConstraint;
|
|
||||||
} else {
|
|
||||||
finalConstraint = generateRandomConstraint();
|
|
||||||
}
|
|
||||||
// 如果发生了批量替换需求，遍历所有组件的所有Pin
|
|
||||||
if (replacedConstraint && newConstraint && replacedConstraint !== newConstraint) {
|
|
||||||
props.components.forEach(comp => {
|
|
||||||
if (comp.props && comp.props.constraint === replacedConstraint) {
|
|
||||||
emit('update-component-prop', { id: comp.id, propName: 'constraint', value: newConstraint });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 完成连线
|
|
||||||
completeWireCreation(
|
|
||||||
componentId,
|
|
||||||
finalConstraint,
|
|
||||||
pinInfo
|
|
||||||
);
|
|
||||||
|
|
||||||
// 更新两个Pin的约束
|
|
||||||
updatePinConstraint(creatingWireStartInfo.componentId, finalConstraint);
|
|
||||||
updatePinConstraint(componentId, finalConstraint);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成随机约束名
|
|
||||||
function generateRandomConstraint() {
|
|
||||||
const randomId = Math.floor(Math.random() * 1000000);
|
|
||||||
return `$auto_constraint_${randomId}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 完成连线创建
|
// 完成连线创建
|
||||||
function completeWireCreation(endComponentId: string, constraint: string, endPinInfo?: any) {
|
function completeWireCreation(endComponentId: string, endPinLabel: string, constraint: string, endPinInfo?: any) {
|
||||||
if (!canvasContainer.value) return;
|
if (!canvasContainer.value) return;
|
||||||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||||||
|
|
||||||
|
|
@ -544,20 +570,31 @@ function completeWireCreation(endComponentId: string, constraint: string, endPin
|
||||||
// 尝试使用 getPinPosition 获取精确的针脚位置
|
// 尝试使用 getPinPosition 获取精确的针脚位置
|
||||||
const endComponentRef = componentRefs.value[endComponentId];
|
const endComponentRef = componentRefs.value[endComponentId];
|
||||||
if (endComponentRef && endComponentRef.getPinPosition) {
|
if (endComponentRef && endComponentRef.getPinPosition) {
|
||||||
const pinPosition = endComponentRef.getPinPosition(endComponentId);
|
const pinPosition = endComponentRef.getPinPosition(endPinLabel);
|
||||||
if (pinPosition) {
|
if (pinPosition) {
|
||||||
endX = (pinPosition.x - containerRect.left - position.x) / scale.value;
|
endX = (pinPosition.x - containerRect.left - position.x) / scale.value;
|
||||||
endY = (pinPosition.y - containerRect.top - position.y) / scale.value;
|
endY = (pinPosition.y - containerRect.top - position.y) / scale.value;
|
||||||
console.log(`通过 getPinPosition 获取终点针脚 ${endComponentId} 的画布坐标: (${endX}, ${endY})`);
|
console.log(`通过 getPinPosition 获取终点针脚 ${endPinLabel} 的画布坐标: (${endX}, ${endY})`);
|
||||||
} else { console.warn(`getPinPosition 返回 null，将使用备选方法`);
|
} else {
|
||||||
|
console.warn(`getPinPosition 返回 null，将使用备选方法`);
|
||||||
}
|
}
|
||||||
} else if (endPinInfo && endPinInfo.position) {
|
} else if (endPinInfo && endPinInfo.position) {
|
||||||
// 如果 getPinPosition 不可用，使用传入的针脚位置信息
|
// 如果 getPinPosition 不可用，使用传入的针脚位置信息
|
||||||
const pinPagePosition = endPinInfo.position;
|
const pinPagePosition = endPinInfo.position;
|
||||||
endX = (pinPagePosition.x - containerRect.left - position.x) / scale.value;
|
endX = (pinPagePosition.x - containerRect.left - position.x) / scale.value;
|
||||||
endY = (pinPagePosition.y - containerRect.top - position.y) / scale.value;
|
endY = (pinPagePosition.y - containerRect.top - position.y) / scale.value;
|
||||||
|
console.log(`通过 pinInfo.position 获取终点针脚位置: (${endX}, ${endY})`);
|
||||||
|
} else {
|
||||||
|
console.warn(`无法获取针脚 ${endPinLabel} 的精确位置，使用鼠标位置代替`);
|
||||||
|
}
|
||||||
|
// 检查起点和终点是否重合
|
||||||
|
const distanceSquared = Math.pow(endX - creatingWireStart.x, 2) + Math.pow(endY - creatingWireStart.y, 2);
|
||||||
|
if (distanceSquared < 1) { // 如果距离小于1像素
|
||||||
|
console.warn(`起点和终点太接近 (${distanceSquared}像素²)，调整终点位置`);
|
||||||
|
// 稍微调整终点位置，避免重合
|
||||||
|
endX += 10 + Math.random() * 5;
|
||||||
|
endY += 10 + Math.random() * 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创建新的连线
|
// 创建新的连线
|
||||||
const newWire: WireItem = {
|
const newWire: WireItem = {
|
||||||
id: `wire-${Date.now()}`,
|
id: `wire-${Date.now()}`,
|
||||||
|
|
@ -566,14 +603,22 @@ function completeWireCreation(endComponentId: string, constraint: string, endPin
|
||||||
endX: endX,
|
endX: endX,
|
||||||
endY: endY,
|
endY: endY,
|
||||||
startComponentId: creatingWireStartInfo.componentId,
|
startComponentId: creatingWireStartInfo.componentId,
|
||||||
|
startPinLabel: creatingWireStartInfo.pinLabel,
|
||||||
endComponentId: endComponentId,
|
endComponentId: endComponentId,
|
||||||
|
endPinLabel: endPinLabel,
|
||||||
color: '#4a5568',
|
color: '#4a5568',
|
||||||
constraint: constraint,
|
constraint: constraint
|
||||||
routingMode: 'orthogonal',
|
|
||||||
strokeWidth: 2,
|
|
||||||
showLabel: false
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log(`新连线创建完成:`, newWire);
|
||||||
|
|
||||||
|
// 确保起点和终点不重合
|
||||||
|
if (Math.abs(newWire.startX - newWire.endX) < 1 && Math.abs(newWire.startY - newWire.endY) < 1) {
|
||||||
|
console.warn(`连线的起点和终点重合，调整终点位置`);
|
||||||
|
newWire.endX += 20;
|
||||||
|
newWire.endY += 20;
|
||||||
|
}
|
||||||
|
|
||||||
wires.value.push(newWire);
|
wires.value.push(newWire);
|
||||||
|
|
||||||
// 通知父组件连线已创建
|
// 通知父组件连线已创建
|
||||||
|
|
@ -586,7 +631,7 @@ function completeWireCreation(endComponentId: string, constraint: string, endPin
|
||||||
|
|
||||||
// 取消连线创建
|
// 取消连线创建
|
||||||
function cancelWireCreation() {
|
function cancelWireCreation() {
|
||||||
resetWireCreation();
|
isCreatingWire.value = false;
|
||||||
document.removeEventListener('mousemove', onCreatingWireMouseMove);
|
document.removeEventListener('mousemove', onCreatingWireMouseMove);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -595,53 +640,97 @@ function onCreatingWireMouseMove(e: MouseEvent) {
|
||||||
updateMousePosition(e);
|
updateMousePosition(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 处理连线点击
|
||||||
|
function handleWireClick(wire: WireItem) {
|
||||||
|
// 这里可以添加连线选中、删除等功能
|
||||||
|
const deleteWire = confirm('是否删除此连线？');
|
||||||
|
if (deleteWire) {
|
||||||
|
// 删除连线
|
||||||
|
const index = wires.value.findIndex(w => w.id === wire.id);
|
||||||
|
if (index !== -1) {
|
||||||
|
const deletedWire = wires.value.splice(index, 1)[0];
|
||||||
|
|
||||||
|
// 通知父组件连线已删除
|
||||||
|
emit('wire-deleted', deletedWire.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新所有连线位置
|
||||||
|
function updateAllWires() {
|
||||||
|
if (!canvasContainer.value) return;
|
||||||
|
|
||||||
|
// 遍历所有连线并更新位置
|
||||||
|
wires.value.forEach(wire => {
|
||||||
|
updateWireWithPinPositions(wire);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 根据针脚位置更新连线
|
// 根据针脚位置更新连线
|
||||||
function updateWireWithPinPositions(wire: WireItem) {
|
function updateWireWithPinPositions(wire: WireItem) {
|
||||||
if (!canvasContainer.value) return;
|
if (!canvasContainer.value) return;
|
||||||
const containerRect = canvasContainer.value.getBoundingClientRect();
|
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||||||
|
|
||||||
|
console.log(`更新连线 ${wire.id}，当前位置: 起点(${wire.startX}, ${wire.startY}), 终点(${wire.endX}, ${wire.endY})`);
|
||||||
|
|
||||||
|
// 保存原始位置，用于检测变化
|
||||||
|
const originalStartX = wire.startX;
|
||||||
|
const originalStartY = wire.startY;
|
||||||
|
const originalEndX = wire.endX;
|
||||||
|
const originalEndY = wire.endY;
|
||||||
|
|
||||||
// 更新起点
|
// 更新起点
|
||||||
if (wire.startComponentId) {
|
if (wire.startComponentId && wire.startPinLabel) {
|
||||||
const startComponentRef = componentRefs.value[wire.startComponentId];
|
const startComponentRef = componentRefs.value[wire.startComponentId];
|
||||||
if (startComponentRef && startComponentRef.getPinPosition) {
|
if (startComponentRef && startComponentRef.getPinPosition) {
|
||||||
const pinPosition = startComponentRef.getPinPosition(wire.startComponentId);
|
const pinPosition = startComponentRef.getPinPosition(wire.startPinLabel);
|
||||||
if (pinPosition) {
|
if (pinPosition) {
|
||||||
wire.startX = (pinPosition.x - containerRect.left - position.x) / scale.value;
|
const newStartX = (pinPosition.x - containerRect.left - position.x) / scale.value;
|
||||||
wire.startY = (pinPosition.y - containerRect.top - position.y) / scale.value;
|
const newStartY = (pinPosition.y - containerRect.top - position.y) / scale.value;
|
||||||
|
|
||||||
|
console.log(`更新连线起点 ${wire.startComponentId}/${wire.startPinLabel}: (${wire.startX}, ${wire.startY}) => (${newStartX}, ${newStartY})`);
|
||||||
|
|
||||||
|
wire.startX = newStartX;
|
||||||
|
wire.startY = newStartY;
|
||||||
} else {
|
} else {
|
||||||
console.warn(`无法获取组件${wire.startComponentId}的针脚${wire.startComponentId}位置`);
|
console.warn(`无法获取针脚 ${wire.startComponentId}/${wire.startPinLabel} 的位置`);
|
||||||
// 尝试多次获取位置（针对初次渲染可能有延迟的情况）
|
|
||||||
setTimeout(() => {
|
|
||||||
const retryPosition = startComponentRef.getPinPosition(wire.startComponentId);
|
|
||||||
if (retryPosition) {
|
|
||||||
wire.startX = (retryPosition.x - containerRect.left - position.x) / scale.value;
|
|
||||||
wire.startY = (retryPosition.y - containerRect.top - position.y) / scale.value;
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
console.warn(`组件 ${wire.startComponentId} 没有实现 getPinPosition 方法`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新终点
|
// 更新终点
|
||||||
if (wire.endComponentId) {
|
if (wire.endComponentId && wire.endPinLabel) {
|
||||||
const endComponentRef = componentRefs.value[wire.endComponentId];
|
const endComponentRef = componentRefs.value[wire.endComponentId];
|
||||||
if (endComponentRef && endComponentRef.getPinPosition) {
|
if (endComponentRef && endComponentRef.getPinPosition) {
|
||||||
const pinPosition = endComponentRef.getPinPosition(wire.endComponentId);
|
const pinPosition = endComponentRef.getPinPosition(wire.endPinLabel);
|
||||||
if (pinPosition) {
|
if (pinPosition) {
|
||||||
wire.endX = (pinPosition.x - containerRect.left - position.x) / scale.value;
|
const newEndX = (pinPosition.x - containerRect.left - position.x) / scale.value;
|
||||||
wire.endY = (pinPosition.y - containerRect.top - position.y) / scale.value;
|
const newEndY = (pinPosition.y - containerRect.top - position.y) / scale.value;
|
||||||
|
|
||||||
|
console.log(`更新连线终点 ${wire.endComponentId}/${wire.endPinLabel}: (${wire.endX}, ${wire.endY}) => (${newEndX}, ${newEndY})`);
|
||||||
|
|
||||||
|
wire.endX = newEndX;
|
||||||
|
wire.endY = newEndY;
|
||||||
} else {
|
} else {
|
||||||
console.warn(`无法获取组件${wire.endComponentId}的针脚${wire.endComponentId}位置`);
|
console.warn(`无法获取针脚 ${wire.endComponentId}/${wire.endPinLabel} 的位置`);
|
||||||
// 尝试多次获取位置（针对初次渲染可能有延迟的情况）
|
|
||||||
setTimeout(() => {
|
|
||||||
const retryPosition = endComponentRef.getPinPosition(wire.endComponentId);
|
|
||||||
if (retryPosition) {
|
|
||||||
wire.endX = (retryPosition.x - containerRect.left - position.x) / scale.value;
|
|
||||||
wire.endY = (retryPosition.y - containerRect.top - position.y) / scale.value;
|
|
||||||
}
|
}
|
||||||
}, 100);
|
} else {
|
||||||
|
console.warn(`组件 ${wire.endComponentId} 没有实现 getPinPosition 方法`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 在更新后检查起点和终点是否重合
|
||||||
|
const positionChanged =
|
||||||
|
originalStartX !== wire.startX ||
|
||||||
|
originalStartY !== wire.startY ||
|
||||||
|
originalEndX !== wire.endX ||
|
||||||
|
originalEndY !== wire.endY;
|
||||||
|
|
||||||
|
if (positionChanged) {
|
||||||
|
// 如果位置有更新，确保起点和终点不重合
|
||||||
|
ensureUniquePinPositions(wire);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -649,9 +738,14 @@ function updateWireWithPinPositions(wire: WireItem) {
|
||||||
function updateWiresForComponent(componentId: string) {
|
function updateWiresForComponent(componentId: string) {
|
||||||
if (!canvasContainer.value || !componentId) return;
|
if (!canvasContainer.value || !componentId) return;
|
||||||
|
|
||||||
|
console.log(`更新组件 ${componentId} 相关的连线位置`);
|
||||||
|
|
||||||
// 检查组件是否存在
|
// 检查组件是否存在
|
||||||
const component = props.components.find(c => c.id === componentId);
|
const component = props.components.find(c => c.id === componentId);
|
||||||
if (!component) return;
|
if (!component) {
|
||||||
|
console.warn(`找不到组件 ${componentId}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 查找与该组件关联的所有连线
|
// 查找与该组件关联的所有连线
|
||||||
const relatedWires = wires.value.filter(wire =>
|
const relatedWires = wires.value.filter(wire =>
|
||||||
|
|
@ -659,14 +753,49 @@ function updateWiresForComponent(componentId: string) {
|
||||||
wire.endComponentId === componentId
|
wire.endComponentId === componentId
|
||||||
);
|
);
|
||||||
|
|
||||||
if (relatedWires.length === 0) return;
|
console.log(`找到 ${relatedWires.length} 条相关连线`);
|
||||||
|
|
||||||
|
if (relatedWires.length === 0) {
|
||||||
|
// 没有找到直接关联的连线，检查所有连线
|
||||||
|
console.log('没有找到直接关联的连线，检查所有连线');
|
||||||
|
|
||||||
|
// 打印所有连线信息，帮助调试
|
||||||
|
wires.value.forEach((wire, index) => {
|
||||||
|
console.log(`连线 ${index}: startComponentId=${wire.startComponentId}, endComponentId=${wire.endComponentId}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 更新所有相关连线的位置
|
// 更新所有相关连线的位置
|
||||||
relatedWires.forEach(wire => {
|
relatedWires.forEach(wire => {
|
||||||
|
console.log(`更新连线 ${wire.id} (${wire.startComponentId}/${wire.startPinLabel} -> ${wire.endComponentId}/${wire.endPinLabel})`);
|
||||||
updateWireWithPinPositions(wire);
|
updateWireWithPinPositions(wire);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 确保针脚位置有差异
|
||||||
|
function ensureUniquePinPositions(wire: WireItem) {
|
||||||
|
if (Math.abs(wire.startX - wire.endX) < 5 && Math.abs(wire.startY - wire.endY) < 5) {
|
||||||
|
console.warn('检测到连线起点和终点非常接近，添加随机偏移');
|
||||||
|
|
||||||
|
// 根据组件ID和针脚标签生成一个确定性的偏移
|
||||||
|
const idSum = (wire.startComponentId?.charCodeAt(0) || 0) +
|
||||||
|
(wire.endComponentId?.charCodeAt(0) || 0) +
|
||||||
|
(wire.startPinLabel?.charCodeAt(0) || 0) +
|
||||||
|
(wire.endPinLabel?.charCodeAt(0) || 0);
|
||||||
|
|
||||||
|
// 使用组件ID和针脚标签生成偏移，确保相同的组件始终有相同的偏移
|
||||||
|
const offsetX = 20 * Math.cos(idSum * 0.1);
|
||||||
|
const offsetY = 20 * Math.sin(idSum * 0.1);
|
||||||
|
|
||||||
|
wire.endX += offsetX;
|
||||||
|
wire.endY += offsetY;
|
||||||
|
|
||||||
|
console.log(`应用偏移 (${offsetX.toFixed(2)}, ${offsetY.toFixed(2)}) 到连线终点`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// --- 生命周期钩子 ---
|
// --- 生命周期钩子 ---
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 初始化中心位置
|
// 初始化中心位置
|
||||||
|
|
@ -680,6 +809,18 @@ onMounted(() => {
|
||||||
|
|
||||||
// 添加键盘事件监听器
|
// 添加键盘事件监听器
|
||||||
window.addEventListener('keydown', handleKeyDown);
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
|
// 添加定期更新连线位置的定时器
|
||||||
|
const wireUpdateInterval = setInterval(() => {
|
||||||
|
if (wires.value.length > 0) {
|
||||||
|
updateAllWires();
|
||||||
|
}
|
||||||
|
}, 1000); // 每秒更新一次所有连线位置
|
||||||
|
|
||||||
|
// 在组件卸载时清除定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(wireUpdateInterval);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 处理键盘事件
|
// 处理键盘事件
|
||||||
|
|
@ -719,11 +860,11 @@ onUnmounted(() => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* background-image:
|
background-image:
|
||||||
linear-gradient(to right, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
linear-gradient(to right, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
||||||
linear-gradient(to bottom, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
linear-gradient(to bottom, rgba(100, 100, 100, 0.1) 1px, transparent 1px),
|
||||||
linear-gradient(to right, rgba(80, 80, 80, 0.2) 100px, transparent 100px),
|
linear-gradient(to right, rgba(80, 80, 80, 0.2) 100px, transparent 100px),
|
||||||
linear-gradient(to bottom, rgba(80, 80, 80, 0.2) 100px, transparent 100px); */
|
linear-gradient(to bottom, rgba(80, 80, 80, 0.2) 100px, transparent 100px);
|
||||||
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
|
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
@ -750,7 +891,7 @@ onUnmounted(() => {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: auto; /* 修复：允许线被点击 */
|
pointer-events: none;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -789,13 +930,13 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 为黑暗模式设置不同的网格线颜色 */
|
/* 为黑暗模式设置不同的网格线颜色 */
|
||||||
/* :root[data-theme="dark"] .diagram-container {
|
:root[data-theme="dark"] .diagram-container {
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
||||||
linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px),
|
||||||
linear-gradient(to right, rgba(180, 180, 180, 0.15) 100px, transparent 100px),
|
linear-gradient(to right, rgba(180, 180, 180, 0.15) 100px, transparent 100px),
|
||||||
linear-gradient(to bottom, rgba(180, 180, 180, 0.15) 100px, transparent 100px);
|
linear-gradient(to bottom, rgba(180, 180, 180, 0.15) 100px, transparent 100px);
|
||||||
} */
|
}
|
||||||
|
|
||||||
/* 深度选择器 - 默认阻止SVG内部元素的鼠标事件，但允许SVG本身和特定交互元素 */
|
/* 深度选择器 - 默认阻止SVG内部元素的鼠标事件，但允许SVG本身和特定交互元素 */
|
||||||
.component-wrapper :deep(svg) {
|
.component-wrapper :deep(svg) {
|
||||||
|
|
@ -820,9 +961,4 @@ onUnmounted(() => {
|
||||||
.component-wrapper :deep(input) {
|
.component-wrapper :deep(input) {
|
||||||
pointer-events: auto !important;
|
pointer-events: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wire-active {
|
|
||||||
stroke: #0099ff !important;
|
|
||||||
filter: drop-shadow(0 0 4px #0099ffcc);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<path
|
||||||
|
:d="pathData"
|
||||||
|
fill="none"
|
||||||
|
:stroke="strokeColor"
|
||||||
|
:stroke-width="strokeWidth"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
:class="{ 'wire-active': isActive }"
|
||||||
|
@click="handleClick"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, defineEmits } from 'vue';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
id: string;
|
||||||
|
startX: number;
|
||||||
|
startY: number;
|
||||||
|
endX: number;
|
||||||
|
endY: number;
|
||||||
|
strokeColor?: string;
|
||||||
|
strokeWidth?: number;
|
||||||
|
isActive?: boolean;
|
||||||
|
routingMode?: 'auto' | 'orthogonal' | 'direct';
|
||||||
|
// 添加针脚引用属性
|
||||||
|
startComponentId?: string;
|
||||||
|
startPinLabel?: string;
|
||||||
|
endComponentId?: string;
|
||||||
|
endPinLabel?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
strokeColor: '#4a5568',
|
||||||
|
strokeWidth: 2,
|
||||||
|
isActive: false,
|
||||||
|
routingMode: 'orthogonal'
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['click']);
|
||||||
|
|
||||||
|
function handleClick(event: MouseEvent) {
|
||||||
|
emit('click', { id: props.id, event });
|
||||||
|
}
|
||||||
|
|
||||||
|
const pathData = computed(() => {
|
||||||
|
// 先检查起点和终点是否几乎重合
|
||||||
|
const dx = Math.abs(props.endX - props.startX);
|
||||||
|
const dy = Math.abs(props.endY - props.startY);
|
||||||
|
|
||||||
|
// 如果几乎重合，强制绘制一个小的可见路径
|
||||||
|
if (dx < 0.5 && dy < 0.5) {
|
||||||
|
console.warn('连线的起点和终点几乎重合，强制绘制可见路径');
|
||||||
|
// 这里绘制一个小圆圈
|
||||||
|
const r = 5; // 半径5像素
|
||||||
|
return `M ${props.startX} ${props.startY}
|
||||||
|
m -${r}, 0
|
||||||
|
a ${r},${r} 0 1,0 ${r*2},0
|
||||||
|
a ${r},${r} 0 1,0 -${r*2},0`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.routingMode === 'direct') {
|
||||||
|
return `M ${props.startX} ${props.startY} L ${props.endX} ${props.endY}`;
|
||||||
|
} else if (props.routingMode === 'orthogonal') {
|
||||||
|
// 计算直角连线路径
|
||||||
|
return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY);
|
||||||
|
} else {
|
||||||
|
// 自动判断连线方式
|
||||||
|
if (dx < 10 || dy < 10) {
|
||||||
|
// 如果距离足够近，使用直线
|
||||||
|
return `M ${props.startX} ${props.startY} L ${props.endX} ${props.endY}`;
|
||||||
|
} else {
|
||||||
|
// 否则使用直角线
|
||||||
|
return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function calculateOrthogonalPath(startX: number, startY: number, endX: number, endY: number) {
|
||||||
|
// 计算两点之间的水平和垂直距离
|
||||||
|
const dx = endX - startX;
|
||||||
|
const dy = endY - startY;
|
||||||
|
|
||||||
|
// 如果起点和终点非常接近，稍微偏移终点
|
||||||
|
if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
|
||||||
|
console.warn('连线的起点和终点几乎重合，调整路径显示');
|
||||||
|
// 强制创建一个小的正方形路径
|
||||||
|
const offset = 5; // 5像素的小正方形
|
||||||
|
return `M ${startX} ${startY}
|
||||||
|
L ${startX + offset} ${startY}
|
||||||
|
L ${startX + offset} ${startY + offset}
|
||||||
|
L ${startX} ${startY + offset}
|
||||||
|
L ${startX} ${startY}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果在同一水平或垂直线上，直接连线
|
||||||
|
if (dx === 0 || dy === 0) {
|
||||||
|
return `M ${startX} ${startY} L ${endX} ${endY}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否能走45度斜线
|
||||||
|
const absDx = Math.abs(dx);
|
||||||
|
const absDy = Math.abs(dy);
|
||||||
|
|
||||||
|
if (absDx === absDy) {
|
||||||
|
// 可以直接走45度斜线
|
||||||
|
return `M ${startX} ${startY} L ${endX} ${endY}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确定要走的路径 - 我们这里使用L型路径
|
||||||
|
// 先水平移动，然后垂直移动
|
||||||
|
if (absDx > absDy) {
|
||||||
|
const middleX = startX + dx * 0.5;
|
||||||
|
return `M ${startX} ${startY}
|
||||||
|
L ${middleX} ${startY}
|
||||||
|
L ${middleX} ${endY}
|
||||||
|
L ${endX} ${endY}`;
|
||||||
|
} else {
|
||||||
|
// 先垂直移动，然后水平移动
|
||||||
|
const middleY = startY + dy * 0.5;
|
||||||
|
return `M ${startX} ${startY}
|
||||||
|
L ${startX} ${middleY}
|
||||||
|
L ${endX} ${middleY}
|
||||||
|
L ${endX} ${endY}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wire-active {
|
||||||
|
stroke-dasharray: 5;
|
||||||
|
animation: dash 0.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dash {
|
||||||
|
to {
|
||||||
|
stroke-dashoffset: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -76,15 +76,13 @@
|
||||||
pointerEvents: 'auto'
|
pointerEvents: 'auto'
|
||||||
}">
|
}">
|
||||||
<Pin
|
<Pin
|
||||||
ref="pinRef"
|
|
||||||
direction="output"
|
direction="output"
|
||||||
type="digital"
|
type="digital"
|
||||||
|
appearance="None"
|
||||||
:label="props.label"
|
:label="props.label"
|
||||||
:constraint="props.constraint"
|
:constraint="props.constraint"
|
||||||
:size="0.8"
|
:size="0.8"
|
||||||
:componentId="props.componentId"
|
|
||||||
@value-change="handlePinValueChange"
|
@value-change="handlePinValueChange"
|
||||||
@pin-click="handlePinClick"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -93,18 +91,15 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||||
import Pin from './Pin.vue';
|
import Pin from './Pin.vue';
|
||||||
import { notifyConstraintChange } from '../../stores/constraints';
|
|
||||||
|
|
||||||
const pinRef = ref<any>(null);
|
|
||||||
|
|
||||||
// 从Pin组件继承属性
|
// 从Pin组件继承属性
|
||||||
interface PinProps {
|
interface PinProps {
|
||||||
label?: string;
|
label?: string;
|
||||||
constraint?: string;
|
constraint?: string;
|
||||||
componentId?: string; // 添加componentId属性
|
|
||||||
// 这些属性被预设为固定值，但仍然包含在类型中以便完整继承
|
// 这些属性被预设为固定值，但仍然包含在类型中以便完整继承
|
||||||
direction?: 'input' | 'output' | 'inout';
|
direction?: 'input' | 'output' | 'inout';
|
||||||
type?: 'digital' | 'analog';
|
type?: 'digital' | 'analog';
|
||||||
|
appearance?: 'None' | 'Dip' | 'SMT';
|
||||||
}
|
}
|
||||||
|
|
||||||
// 按钮特有属性
|
// 按钮特有属性
|
||||||
|
|
@ -123,10 +118,10 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
buttonText: '',
|
buttonText: '',
|
||||||
label: 'BTN',
|
label: 'BTN',
|
||||||
constraint: '',
|
constraint: '',
|
||||||
componentId: 'button-default', // 添加默认componentId
|
|
||||||
// 这些值会被覆盖，但需要默认值以满足类型要求
|
// 这些值会被覆盖，但需要默认值以满足类型要求
|
||||||
direction: 'output',
|
direction: 'output',
|
||||||
type: 'digital'
|
type: 'digital',
|
||||||
|
appearance: 'Dip'
|
||||||
});
|
});
|
||||||
|
|
||||||
// 计算实际宽高
|
// 计算实际宽高
|
||||||
|
|
@ -147,8 +142,7 @@ const emit = defineEmits([
|
||||||
'press',
|
'press',
|
||||||
'release',
|
'release',
|
||||||
'click',
|
'click',
|
||||||
'value-change',
|
'value-change'
|
||||||
'pin-click'
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 内部状态
|
// 内部状态
|
||||||
|
|
@ -161,11 +155,6 @@ function handlePinValueChange(value: any) {
|
||||||
emit('value-change', value);
|
emit('value-change', value);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理Pin点击事件
|
|
||||||
function handlePinClick(info: any) {
|
|
||||||
emit('pin-click', info);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- 按键状态逻辑 ---
|
// --- 按键状态逻辑 ---
|
||||||
function toggleButtonState(isPressed: boolean) {
|
function toggleButtonState(isPressed: boolean) {
|
||||||
isKeyPressed.value = isPressed;
|
isKeyPressed.value = isPressed;
|
||||||
|
|
@ -174,17 +163,9 @@ function toggleButtonState(isPressed: boolean) {
|
||||||
// 发出事件通知父组件
|
// 发出事件通知父组件
|
||||||
if (isPressed) {
|
if (isPressed) {
|
||||||
emit('press');
|
emit('press');
|
||||||
// 如果有约束，通知约束状态变化为高电平
|
|
||||||
if (props.constraint) {
|
|
||||||
notifyConstraintChange(props.constraint, 'high');
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
emit('release');
|
emit('release');
|
||||||
emit('click');
|
emit('click');
|
||||||
// 如果有约束，通知约束状态变化为低电平
|
|
||||||
if (props.constraint) {
|
|
||||||
notifyConstraintChange(props.constraint, 'low');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -215,18 +196,11 @@ defineExpose({
|
||||||
// 继承自Pin的属性
|
// 继承自Pin的属性
|
||||||
label: props.label,
|
label: props.label,
|
||||||
constraint: props.constraint,
|
constraint: props.constraint,
|
||||||
componentId: props.componentId, // 添加componentId
|
|
||||||
// 固定的Pin属性
|
// 固定的Pin属性
|
||||||
direction: 'output',
|
direction: 'output',
|
||||||
type: 'digital'
|
type: 'digital',
|
||||||
}),
|
appearance: 'None'
|
||||||
// 代理 getPinPosition 到内部 Pin
|
})
|
||||||
getPinPosition: (pinLabel: string) => {
|
|
||||||
if (pinRef.value && pinRef.value.getPinPosition) {
|
|
||||||
return pinRef.value.getPinPosition(pinLabel);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,79 @@
|
||||||
<template>
|
<template>
|
||||||
<svg
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
:width="width"
|
:width="width"
|
||||||
:height="height"
|
:height="height"
|
||||||
:viewBox="'0 0 ' + viewBoxWidth + ' ' + viewBoxHeight"
|
:viewBox="'0 0 ' + viewBoxWidth + ' ' + viewBoxHeight"
|
||||||
class="pin-component"
|
class="pin-component"
|
||||||
:data-component-id="props.componentId"
|
:data-pin-id="props.label"
|
||||||
:data-pin-label="props.label"
|
|
||||||
>
|
>
|
||||||
<g :transform="`translate(${viewBoxWidth/2}, ${viewBoxHeight/2})`">
|
<g :transform="`translate(${viewBoxWidth/2}, ${viewBoxHeight/2})`"> <g v-if="props.appearance === 'None'">
|
||||||
<g>
|
<g transform="translate(-12.5, -12.5)" class="interactive"> <circle
|
||||||
<g transform="translate(-12.5, -12.5)">
|
style="fill:#909090"
|
||||||
<circle
|
|
||||||
:style="{ fill: pinColor }"
|
|
||||||
cx="12.5"
|
cx="12.5"
|
||||||
cy="12.5"
|
cy="12.5"
|
||||||
r="3.75"
|
r="3.75"
|
||||||
class="interactive"
|
@mouseenter="showPinTooltip"
|
||||||
|
@mouseleave="hidePinTooltip"
|
||||||
@click.stop="handlePinClick"
|
@click.stop="handlePinClick"
|
||||||
:data-pin-element="`${props.componentId}`" />
|
:data-pin-id="`${props.label}-${props.constraint}`" />
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
<g v-else-if="props.appearance === 'Dip'">
|
||||||
|
<!-- 使用inkscape创建的SVG替代原有Dip样式 -->
|
||||||
|
<g transform="translate(-12.5, -12.5)" class="interactive">
|
||||||
|
<rect
|
||||||
|
:style="`fill:${props.type === 'analog' ? '#2a6099' : '#000000'};fill-opacity:0.772973`"
|
||||||
|
width="25"
|
||||||
|
height="25"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
rx="2.5" /> <circle
|
||||||
|
style="fill:#ecececc5;fill-opacity:0.772973"
|
||||||
|
cx="12.5"
|
||||||
|
cy="12.5"
|
||||||
|
r="3.75"
|
||||||
|
@mouseenter="showPinTooltip"
|
||||||
|
@mouseleave="hidePinTooltip"
|
||||||
|
@click.stop="handlePinClick"
|
||||||
|
:data-pin-id="`${props.label}-${props.constraint}`" />
|
||||||
|
<text
|
||||||
|
style="font-size:6.85px;text-align:start;fill:#ffffff;fill-opacity:0.772973"
|
||||||
|
x="7.3"
|
||||||
|
y="7"
|
||||||
|
xml:space="preserve">{{ props.label }}</text>
|
||||||
</g>
|
</g>
|
||||||
|
</g> <g v-else-if="props.appearance === 'SMT'">
|
||||||
|
<rect x="-20" y="-10" width="40" height="20" fill="#aaa" rx="2" ry="2" />
|
||||||
|
<rect x="-18" y="-8" width="36" height="16" :fill="getColorByType" rx="1" ry="1" />
|
||||||
|
<rect x="-16" y="-6" width="26" height="12" :fill="getColorByType" rx="1" ry="1" />
|
||||||
|
<text text-anchor="middle" dominant-baseline="middle" font-size="8" fill="white" x="-3">{{ props.label }}</text>
|
||||||
|
<!-- SMT样式的针脚 --> <circle
|
||||||
|
fill="#ecececc5"
|
||||||
|
cx="10"
|
||||||
|
cy="0"
|
||||||
|
r="3.75"
|
||||||
|
class="interactive"
|
||||||
|
@mouseenter="showPinTooltip"
|
||||||
|
@mouseleave="hidePinTooltip"
|
||||||
|
@click.stop="handlePinClick"
|
||||||
|
:data-pin-id="`${props.label}-${props.constraint}`" />
|
||||||
|
</g> </g>
|
||||||
</svg>
|
</svg>
|
||||||
|
<!-- 提示框 - 在SVG外部 -->
|
||||||
|
<div v-if="showTooltip" class="pin-tooltip" :style="{
|
||||||
|
position: 'absolute',
|
||||||
|
top: tooltipPosition.top + 'px',
|
||||||
|
left: tooltipPosition.left + 'px',
|
||||||
|
transform: 'translate(-50%, -100%)',
|
||||||
|
marginTop: '-5px'
|
||||||
|
}">
|
||||||
|
{{ tooltipText }}
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, reactive, watch, onMounted, onUnmounted } from 'vue';
|
import { ref, computed, reactive } from 'vue';
|
||||||
import { getConstraintColor, getConstraintState, onConstraintStateChange, notifyConstraintChange } from '../../stores/constraints';
|
|
||||||
|
|
||||||
// 生成唯一ID
|
|
||||||
const uniqueId = `pin-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
size?: number;
|
size?: number;
|
||||||
|
|
@ -37,7 +81,7 @@ interface Props {
|
||||||
constraint?: string;
|
constraint?: string;
|
||||||
direction?: 'input' | 'output' | 'inout';
|
direction?: 'input' | 'output' | 'inout';
|
||||||
type?: 'digital' | 'analog';
|
type?: 'digital' | 'analog';
|
||||||
componentId?: string; // 添加组件ID属性，用于唯一标识
|
appearance?: 'None' | 'Dip' | 'SMT';
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
|
@ -46,7 +90,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
constraint: '',
|
constraint: '',
|
||||||
direction: 'input',
|
direction: 'input',
|
||||||
type: 'digital',
|
type: 'digital',
|
||||||
componentId: 'pin-default' // 默认ID
|
appearance: 'Dip'
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
|
|
@ -56,6 +100,58 @@ const emit = defineEmits([
|
||||||
|
|
||||||
// 内部状态
|
// 内部状态
|
||||||
const analogValue = ref(0);
|
const analogValue = ref(0);
|
||||||
|
const showTooltip = ref(false);
|
||||||
|
const tooltipText = ref('');
|
||||||
|
const tooltipPosition = reactive({
|
||||||
|
top: 0,
|
||||||
|
left: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示针脚提示
|
||||||
|
function showPinTooltip(event: MouseEvent) {
|
||||||
|
showTooltip.value = true;
|
||||||
|
const target = event.target as SVGElement;
|
||||||
|
const rect = target.getBoundingClientRect();
|
||||||
|
|
||||||
|
// 更新提示位置
|
||||||
|
tooltipPosition.top = rect.top;
|
||||||
|
tooltipPosition.left = rect.left + rect.width / 2;
|
||||||
|
|
||||||
|
// 更新提示文本
|
||||||
|
tooltipText.value = generateTooltipText();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏针脚提示
|
||||||
|
function hidePinTooltip() {
|
||||||
|
showTooltip.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成提示文本
|
||||||
|
function generateTooltipText() {
|
||||||
|
const parts = [];
|
||||||
|
parts.push(`标签: ${props.label}`);
|
||||||
|
|
||||||
|
if (props.constraint) {
|
||||||
|
parts.push(`约束: ${props.constraint}`);
|
||||||
|
} else {
|
||||||
|
parts.push('约束: 未定义');
|
||||||
|
}
|
||||||
|
|
||||||
|
parts.push(`方向: ${getDirectionText()}`);
|
||||||
|
parts.push(`类型: ${props.type === 'digital' ? '数字' : '模拟'}`);
|
||||||
|
|
||||||
|
return parts.join(' | ');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取方向文本
|
||||||
|
function getDirectionText() {
|
||||||
|
switch (props.direction) {
|
||||||
|
case 'input': return '输入';
|
||||||
|
case 'output': return '输出';
|
||||||
|
case 'inout': return '双向';
|
||||||
|
default: return '未知';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 处理针脚点击
|
// 处理针脚点击
|
||||||
function handlePinClick(event: MouseEvent) {
|
function handlePinClick(event: MouseEvent) {
|
||||||
|
|
@ -66,64 +162,42 @@ function handlePinClick(event: MouseEvent) {
|
||||||
x: rect.left + rect.width / 2,
|
x: rect.left + rect.width / 2,
|
||||||
y: rect.top + rect.height / 2
|
y: rect.top + rect.height / 2
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log(`针脚 ${props.label} 被点击，位置:`, pinCenter);
|
||||||
|
|
||||||
|
// 发送针脚点击事件给父组件
|
||||||
emit('pin-click', {
|
emit('pin-click', {
|
||||||
label: props.label,
|
label: props.label,
|
||||||
constraint: props.constraint,
|
constraint: props.constraint,
|
||||||
type: props.type,
|
type: props.type,
|
||||||
direction: props.direction,
|
direction: props.direction,
|
||||||
position: pinCenter,
|
// 获取针脚在页面上的位置
|
||||||
|
position: {
|
||||||
|
x: pinCenter.x,
|
||||||
|
y: pinCenter.y
|
||||||
|
},
|
||||||
|
// 获取原始事件
|
||||||
originalEvent: event
|
originalEvent: event
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const width = computed(() => 40 * props.size);
|
const width = computed(() => props.appearance === 'None' ? 40 * props.size : 30 * props.size);
|
||||||
const height = computed(() => 20 * props.size);
|
const height = computed(() => {
|
||||||
const viewBoxWidth = computed(() => 40);
|
if (props.appearance === 'None') return 20 * props.size;
|
||||||
const viewBoxHeight = computed(() => 20);
|
if (props.appearance === 'Dip') return 30 * props.size; // 调整Dip样式高度
|
||||||
|
return 60 * props.size;
|
||||||
|
});
|
||||||
|
const viewBoxWidth = computed(() => props.appearance === 'None' ? 40 : 30);
|
||||||
|
const viewBoxHeight = computed(() => {
|
||||||
|
if (props.appearance === 'None') return 20;
|
||||||
|
if (props.appearance === 'Dip') return 30; // 调整Dip样式视图高度
|
||||||
|
return 60;
|
||||||
|
});
|
||||||
|
|
||||||
const getColorByType = computed(() => {
|
const getColorByType = computed(() => {
|
||||||
return props.type === 'analog' ? '#2a6099' : '#444';
|
return props.type === 'analog' ? '#2a6099' : '#444';
|
||||||
});
|
});
|
||||||
|
|
||||||
// 根据约束电平状态计算引脚颜色
|
|
||||||
const pinColor = computed(() => {
|
|
||||||
return getConstraintColor(props.constraint) || getColorByType.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听约束状态变化
|
|
||||||
let unsubscribe: (() => void) | null = null;
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 监听约束状态变化
|
|
||||||
if (props.constraint) {
|
|
||||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
|
||||||
if (constraint === props.constraint) {
|
|
||||||
emit('value-change', { constraint, level });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (unsubscribe) {
|
|
||||||
unsubscribe();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(() => props.constraint, (newConstraint, oldConstraint) => {
|
|
||||||
if (unsubscribe) {
|
|
||||||
unsubscribe();
|
|
||||||
unsubscribe = null;
|
|
||||||
}
|
|
||||||
if (newConstraint) {
|
|
||||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
|
||||||
if (constraint === newConstraint) {
|
|
||||||
emit('value-change', { constraint, level });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateAnalogValue(value: number) {
|
function updateAnalogValue(value: number) {
|
||||||
if (props.type !== 'analog') return;
|
if (props.type !== 'analog') return;
|
||||||
analogValue.value = Math.max(0, Math.min(1, value));
|
analogValue.value = Math.max(0, Math.min(1, value));
|
||||||
|
|
@ -142,39 +216,46 @@ defineExpose({
|
||||||
constraint: props.constraint,
|
constraint: props.constraint,
|
||||||
direction: props.direction,
|
direction: props.direction,
|
||||||
type: props.type,
|
type: props.type,
|
||||||
componentId: props.componentId
|
appearance: props.appearance
|
||||||
}),
|
}), // 添加获取针脚位置的方法
|
||||||
getPinPosition: (componentId: string) => {
|
getPinPosition: (pinLabel: string) => {
|
||||||
if (componentId !== props.componentId) return null;
|
// 在 Pin 组件中，只有一个针脚，所以直接检查标签是否匹配
|
||||||
console.log('getPinPosition', componentId, props.componentId);
|
if (pinLabel !== props.label) return null;
|
||||||
const uniqueSelector = `[data-pin-element="${props.componentId}"]`;
|
|
||||||
console.log('uniqueSelector', uniqueSelector);
|
// 使用自身作为一个唯一标识符，确保针脚位置是基于实际的DOM位置
|
||||||
const pinElements = document.querySelectorAll(uniqueSelector);
|
// 这样可以避免document.querySelector获取到非预期的元素
|
||||||
console.log('pinElements', pinElements);
|
const pinElement = document.querySelector(`[data-pin-id="${props.label}-${props.constraint}"]`) as SVGElement;
|
||||||
if (pinElements.length === 0) return null;
|
|
||||||
if (pinElements.length === 1) {
|
if (pinElement) {
|
||||||
const rect = pinElements[0].getBoundingClientRect();
|
// 获取针脚元素的位置
|
||||||
return {
|
|
||||||
x: rect.left + rect.width / 2,
|
|
||||||
y: rect.top + rect.height / 2
|
|
||||||
};
|
|
||||||
}
|
|
||||||
for (const pinElement of pinElements) {
|
|
||||||
let parentSvg = pinElement.closest('svg.pin-component');
|
|
||||||
if (!parentSvg) continue;
|
|
||||||
if (parentSvg.getAttribute('data-component-id') === props.componentId) {
|
|
||||||
const rect = pinElement.getBoundingClientRect();
|
const rect = pinElement.getBoundingClientRect();
|
||||||
return {
|
return {
|
||||||
x: rect.left + rect.width / 2,
|
x: rect.left + rect.width / 2,
|
||||||
y: rect.top + rect.height / 2
|
y: rect.top + rect.height / 2
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 如果找不到特定元素，使用计算出的位置
|
||||||
|
// 这种情况下我们需要找到父SVG元素位置
|
||||||
|
const svgElement = document.querySelector(`.pin-component[data-pin-id="${props.label}"]`) as SVGElement;
|
||||||
|
if (!svgElement) {
|
||||||
|
console.error(`找不到针脚 ${props.label} 的SVG元素`);
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
const rect = pinElements[0].getBoundingClientRect();
|
|
||||||
return {
|
const svgRect = svgElement.getBoundingClientRect();
|
||||||
x: rect.left + rect.width / 2,
|
|
||||||
y: rect.top + rect.height / 2
|
// 根据针脚类型和方向计算相对位置
|
||||||
};
|
let pinX = svgRect.left + svgRect.width / 2;
|
||||||
|
let pinY = svgRect.top + svgRect.height / 2;
|
||||||
|
|
||||||
|
// 添加一个小的随机偏移，确保不同针脚返回不同位置
|
||||||
|
// 仅在测试时启用，生产环境应使用更精确的算法
|
||||||
|
const randomOffset = 0.1;
|
||||||
|
pinX += Math.random() * randomOffset;
|
||||||
|
pinY += Math.random() * randomOffset;
|
||||||
|
|
||||||
|
return { x: pinX, y: pinY };
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -192,4 +273,15 @@ defineExpose({
|
||||||
.interactive:hover {
|
.interactive:hover {
|
||||||
filter: brightness(1.2);
|
filter: brightness(1.2);
|
||||||
}
|
}
|
||||||
|
.pin-tooltip {
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -20,9 +20,10 @@
|
||||||
x="15"
|
x="15"
|
||||||
y="15"
|
y="15"
|
||||||
:fill="ledColor"
|
:fill="ledColor"
|
||||||
:style="{ opacity: isOn ? 1 : 0.2 }"
|
:style="{ opacity: isOn ? brightness/100 : 0.2 }"
|
||||||
rx="15"
|
rx="15"
|
||||||
ry="15"
|
ry="15"
|
||||||
|
@click="toggleLed"
|
||||||
class="interactive"
|
class="interactive"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
@ -34,64 +35,46 @@
|
||||||
x="12"
|
x="12"
|
||||||
y="12"
|
y="12"
|
||||||
:fill="ledColor"
|
:fill="ledColor"
|
||||||
:style="{ opacity: 0.3 }"
|
:style="{ opacity: brightness/100 * 0.3 }"
|
||||||
rx="18"
|
rx="18"
|
||||||
ry="18"
|
ry="18"
|
||||||
filter="blur(5px)"
|
filter="blur(5px)"
|
||||||
class="glow"
|
class="glow"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<!-- 新增：数字输入引脚Pin，放在LED左侧居中 -->
|
|
||||||
<div style="position:absolute;left:-18px;top:50%;transform:translateY(-50%);">
|
|
||||||
<Pin
|
|
||||||
ref="pinRef"
|
|
||||||
v-bind="props"
|
|
||||||
@pin-click="$emit('pin-click', $event)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
|
import { ref, computed, watch } from 'vue';
|
||||||
import { getConstraintState, onConstraintStateChange } from '../../stores/constraints';
|
|
||||||
import Pin from './Pin.vue';
|
|
||||||
|
|
||||||
// --- 关键：暴露getPinPosition，代理到内部Pin ---
|
|
||||||
const pinRef = ref<any>(null);
|
|
||||||
|
|
||||||
// 从Pin组件继承属性
|
|
||||||
interface PinProps {
|
|
||||||
label?: string;
|
|
||||||
constraint?: string;
|
|
||||||
componentId?: string; // 添加componentId属性
|
|
||||||
// 这些属性被预设为固定值，但仍然包含在类型中以便完整继承
|
|
||||||
direction?: 'input' | 'output' | 'inout';
|
|
||||||
type?: 'digital' | 'analog';
|
|
||||||
}
|
|
||||||
|
|
||||||
// LED特有属性
|
// LED特有属性
|
||||||
interface LEDProps {
|
interface Props {
|
||||||
size?: number;
|
size?: number;
|
||||||
color?: string;
|
color?: string;
|
||||||
|
initialOn?: boolean;
|
||||||
|
brightness?: number;
|
||||||
|
constraint?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 组合两个接口
|
// 组件属性定义
|
||||||
interface Props extends PinProps, LEDProps {}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
size: 1,
|
size: 1,
|
||||||
color: 'red',
|
color: 'red',
|
||||||
constraint: '',
|
initialOn: false,
|
||||||
label: 'LED',
|
brightness: 80, // 亮度默认为80%
|
||||||
componentId: ''
|
constraint: ''
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 计算实际宽高
|
||||||
const width = computed(() => 100 * props.size);
|
const width = computed(() => 100 * props.size);
|
||||||
const height = computed(() => 60 * props.size);
|
const height = computed(() => 60 * props.size);
|
||||||
|
|
||||||
const isOn = ref(false);
|
// 内部状态
|
||||||
|
const isOn = ref(props.initialOn);
|
||||||
|
const brightness = ref(props.brightness);
|
||||||
|
|
||||||
|
// LED 颜色映射表
|
||||||
const colorMap: Record<string, string> = {
|
const colorMap: Record<string, string> = {
|
||||||
'red': '#ff3333',
|
'red': '#ff3333',
|
||||||
'green': '#33ff33',
|
'green': '#33ff33',
|
||||||
|
|
@ -102,64 +85,70 @@ const colorMap: Record<string, string> = {
|
||||||
'purple': '#9933ff'
|
'purple': '#9933ff'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 计算实际LED颜色
|
||||||
const ledColor = computed(() => {
|
const ledColor = computed(() => {
|
||||||
return colorMap[props.color.toLowerCase()] || props.color;
|
return colorMap[props.color.toLowerCase()] || props.color;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 监听约束状态变化
|
// 定义组件发出的事件
|
||||||
let unsubscribe: (() => void) | null = null;
|
const emit = defineEmits([
|
||||||
|
'toggle',
|
||||||
|
'brightness-change',
|
||||||
|
'value-change'
|
||||||
|
]);
|
||||||
|
|
||||||
onMounted(() => {
|
// 手动切换LED状态
|
||||||
if (props.constraint) {
|
function toggleLed() {
|
||||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
isOn.value = !isOn.value;
|
||||||
if (constraint === props.constraint) {
|
emit('toggle', isOn.value);
|
||||||
isOn.value = (level === 'high');
|
emit('value-change', {
|
||||||
}
|
isOn: isOn.value,
|
||||||
|
brightness: brightness.value
|
||||||
});
|
});
|
||||||
// 初始化LED状态
|
}
|
||||||
const currentState = getConstraintState(props.constraint);
|
|
||||||
isOn.value = (currentState === 'high');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
// 设置亮度
|
||||||
if (unsubscribe) {
|
function setBrightness(value: number) {
|
||||||
unsubscribe();
|
// 限制亮度值在0-100范围内
|
||||||
}
|
brightness.value = Math.max(0, Math.min(100, value));
|
||||||
});
|
emit('brightness-change', brightness.value);
|
||||||
|
emit('value-change', {
|
||||||
watch(() => props.constraint, (newConstraint) => {
|
isOn: isOn.value,
|
||||||
if (unsubscribe) {
|
brightness: brightness.value
|
||||||
unsubscribe();
|
|
||||||
unsubscribe = null;
|
|
||||||
}
|
|
||||||
if (newConstraint) {
|
|
||||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
|
||||||
if (constraint === newConstraint) {
|
|
||||||
isOn.value = (level === 'high');
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
// 初始化LED状态
|
}
|
||||||
const currentState = getConstraintState(newConstraint);
|
|
||||||
isOn.value = (currentState === 'high');
|
// 手动设置LED开关状态
|
||||||
}
|
function setLedState(on: boolean) {
|
||||||
|
isOn.value = on;
|
||||||
|
emit('toggle', isOn.value);
|
||||||
|
emit('value-change', {
|
||||||
|
isOn: isOn.value,
|
||||||
|
brightness: brightness.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听props变化
|
||||||
|
watch(() => props.brightness, (newVal) => {
|
||||||
|
brightness.value = newVal;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch(() => props.initialOn, (newVal) => {
|
||||||
|
isOn.value = newVal;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 向外暴露方法
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
toggleLed,
|
||||||
|
setBrightness,
|
||||||
|
setLedState,
|
||||||
getInfo: () => ({
|
getInfo: () => ({
|
||||||
|
// LED特有属性
|
||||||
color: props.color,
|
color: props.color,
|
||||||
isOn: isOn.value,
|
isOn: isOn.value,
|
||||||
constraint: props.constraint,
|
brightness: brightness.value,
|
||||||
componentId: props.componentId,
|
constraint: props.constraint
|
||||||
direction: 'input',
|
})
|
||||||
type: 'digital'
|
|
||||||
}),
|
|
||||||
getPinPosition: (componentId: string) => {
|
|
||||||
if (pinRef.value && pinRef.value.getPinPosition) {
|
|
||||||
return pinRef.value.getPinPosition(componentId);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,198 +0,0 @@
|
||||||
<template>
|
|
||||||
<g :data-wire-id="props.id">
|
|
||||||
<path
|
|
||||||
:d="pathData"
|
|
||||||
fill="none"
|
|
||||||
:stroke="computedStroke"
|
|
||||||
:stroke-width="strokeWidth"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
:class="{ 'wire-active': props.isActive }"
|
|
||||||
@click="handleClick"
|
|
||||||
/>
|
|
||||||
<!-- 可选：添加连线标签或状态指示器 -->
|
|
||||||
<text
|
|
||||||
v-if="showLabel"
|
|
||||||
:x="labelPosition.x"
|
|
||||||
:y="labelPosition.y"
|
|
||||||
class="wire-label"
|
|
||||||
>{{ props.constraint || '' }}</text>
|
|
||||||
</g>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, defineEmits, reactive, watch, onMounted, onUnmounted } from 'vue';
|
|
||||||
import { getConstraintColor, getConstraintState, onConstraintStateChange } from '../../stores/constraints';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
id: string;
|
|
||||||
startX: number;
|
|
||||||
startY: number;
|
|
||||||
endX: number;
|
|
||||||
endY: number;
|
|
||||||
strokeColor?: string;
|
|
||||||
strokeWidth?: number;
|
|
||||||
isActive?: boolean;
|
|
||||||
routingMode?: 'auto' | 'orthogonal' | 'direct';
|
|
||||||
// 针脚引用属性
|
|
||||||
startComponentId?: string;
|
|
||||||
startPinLabel?: string;
|
|
||||||
endComponentId?: string;
|
|
||||||
endPinLabel?: string;
|
|
||||||
// 添加约束属性
|
|
||||||
constraint?: string;
|
|
||||||
// 显示标签
|
|
||||||
showLabel?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
strokeColor: '#4a5568',
|
|
||||||
strokeWidth: 2,
|
|
||||||
isActive: false,
|
|
||||||
routingMode: 'orthogonal',
|
|
||||||
showLabel: false,
|
|
||||||
constraint: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
// 响应约束状态变化的颜色
|
|
||||||
const constraintColor = computed(() => {
|
|
||||||
if (!props.constraint) return props.strokeColor;
|
|
||||||
return getConstraintColor(props.constraint);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 计算实际使用的颜色：isActive优先，其次是constraint电平颜色，最后是默认色
|
|
||||||
const computedStroke = computed(() => {
|
|
||||||
if (props.isActive) return '#ff9800';
|
|
||||||
return constraintColor.value || props.strokeColor;
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['click', 'update:active', 'update:position']);
|
|
||||||
|
|
||||||
function handleClick(event: MouseEvent) {
|
|
||||||
emit('click', { id: props.id, event });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算标签位置 - 放在连线中间
|
|
||||||
const labelPosition = computed(() => {
|
|
||||||
return {
|
|
||||||
x: (props.startX + props.endX) / 2,
|
|
||||||
y: (props.startY + props.endY) / 2 - 5
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const pathData = computed(() => {
|
|
||||||
return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY);
|
|
||||||
});
|
|
||||||
|
|
||||||
function calculateOrthogonalPath(startX: number, startY: number, endX: number, endY: number) {
|
|
||||||
// 计算两点之间的水平和垂直距离
|
|
||||||
const dx = endX - startX;
|
|
||||||
const dy = endY - startY;
|
|
||||||
|
|
||||||
// 如果在同一水平或垂直线上，直接连线
|
|
||||||
if (dx === 0 || dy === 0) {
|
|
||||||
return `M ${startX} ${startY} L ${endX} ${endY}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const absDx = Math.abs(dx);
|
|
||||||
const absDy = Math.abs(dy);
|
|
||||||
if (absDx > absDy) {
|
|
||||||
// 先水平移动，然后垂直移动
|
|
||||||
const middleX = startX + dx * 0.5;
|
|
||||||
return `M ${startX} ${startY} L ${middleX} ${startY} L ${middleX} ${endY} L ${endX} ${endY}`;
|
|
||||||
} else {
|
|
||||||
// 先垂直移动，然后水平移动
|
|
||||||
const middleY = startY + dy * 0.5;
|
|
||||||
return `M ${startX} ${startY} L ${startX} ${middleY} L ${endX} ${middleY} L ${endX} ${endY}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听约束状态变化
|
|
||||||
let unsubscribe: (() => void) | null = null;
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 监听约束状态变化
|
|
||||||
if (props.constraint) {
|
|
||||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
|
||||||
if (constraint === props.constraint) {
|
|
||||||
// 约束状态变化，触发重新渲染
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
// 清理监听
|
|
||||||
if (unsubscribe) {
|
|
||||||
unsubscribe();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听约束属性变化
|
|
||||||
watch(() => props.constraint, (newConstraint, oldConstraint) => {
|
|
||||||
if (unsubscribe) {
|
|
||||||
unsubscribe();
|
|
||||||
unsubscribe = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newConstraint) {
|
|
||||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
|
||||||
if (constraint === newConstraint) {
|
|
||||||
// 约束状态变化，触发重新渲染
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 暴露方法，用于获取这条连线的信息
|
|
||||||
defineExpose({ id: props.id,
|
|
||||||
getInfo: () => ({
|
|
||||||
id: props.id,
|
|
||||||
startComponentId: props.startComponentId,
|
|
||||||
startPinLabel: props.startPinLabel,
|
|
||||||
endComponentId: props.endComponentId,
|
|
||||||
endPinLabel: props.endPinLabel,
|
|
||||||
constraint: props.constraint
|
|
||||||
}),
|
|
||||||
// 更新连线位置
|
|
||||||
updatePosition: (newStartX: number, newStartY: number, newEndX: number, newEndY: number) => {
|
|
||||||
// 由于 props 是只读的，我们只能通过事件通知父组件更新
|
|
||||||
emit('update:position', {
|
|
||||||
id: props.id,
|
|
||||||
startX: newStartX,
|
|
||||||
startY: newStartY,
|
|
||||||
endX: newEndX,
|
|
||||||
endY: newEndY
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 获取连线的针脚情况
|
|
||||||
getPinPosition: () => null, // 为了与其他组件接口一致，但Wire不是针脚组件
|
|
||||||
// 获取连线的路由模式
|
|
||||||
getRoutingMode: () => props.routingMode,
|
|
||||||
// 设置连线状态（如高亮等）
|
|
||||||
setActive: (active: boolean) => {
|
|
||||||
emit('update:active', active);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.wire-active {
|
|
||||||
stroke-dasharray: 5;
|
|
||||||
animation: dash 0.5s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dash {
|
|
||||||
to {
|
|
||||||
stroke-dashoffset: 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wire-label {
|
|
||||||
font-size: 10px;
|
|
||||||
fill: #666;
|
|
||||||
text-anchor: middle;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -154,6 +154,18 @@ const componentConfigs: Record<string, ComponentConfig> = {
|
||||||
{ value: 'analog', label: 'analog' }
|
{ value: 'analog', label: 'analog' }
|
||||||
],
|
],
|
||||||
description: '引脚的模数特性，数字或模拟'
|
description: '引脚的模数特性，数字或模拟'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'appearance',
|
||||||
|
type: 'select',
|
||||||
|
label: '引脚样式',
|
||||||
|
default: 'Dip',
|
||||||
|
options: [
|
||||||
|
{ value: 'None', label: 'None' },
|
||||||
|
{ value: 'Dip', label: 'Dip' },
|
||||||
|
{ value: 'SMT', label: 'SMT' }
|
||||||
|
],
|
||||||
|
description: '引脚的外观样式，不影响功能'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -301,60 +313,12 @@ const componentConfigs: Record<string, ComponentConfig> = {
|
||||||
{
|
{
|
||||||
name: 'constraint',
|
name: 'constraint',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
label: '引脚约束',
|
label: '连接约束',
|
||||||
default: '',
|
default: '',
|
||||||
description: '相同约束字符串的引脚将被视为有电气连接'
|
description: '相同约束字符串的组件将被视为有电气连接'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
// 线缆配置
|
|
||||||
Wire: {
|
|
||||||
props: [
|
|
||||||
{
|
|
||||||
name: 'routingMode',
|
|
||||||
type: 'select',
|
|
||||||
label: '路由方式',
|
|
||||||
default: 'orthogonal',
|
|
||||||
options: [
|
|
||||||
{ value: 'orthogonal', label: '直角' },
|
|
||||||
{ value: 'direct', label: '直线' },
|
|
||||||
{ value: 'auto', label: '自动' }
|
|
||||||
],
|
|
||||||
description: '线路连接方式'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'strokeColor',
|
|
||||||
type: 'string',
|
|
||||||
label: '线条颜色',
|
|
||||||
default: '#4a5568',
|
|
||||||
description: '线条颜色，使用CSS颜色值'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'strokeWidth',
|
|
||||||
type: 'number',
|
|
||||||
label: '线条宽度',
|
|
||||||
default: 2,
|
|
||||||
min: 1,
|
|
||||||
max: 10,
|
|
||||||
step: 0.5,
|
|
||||||
description: '线条宽度'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'constraint',
|
|
||||||
type: 'string',
|
|
||||||
label: '约束名称',
|
|
||||||
default: '',
|
|
||||||
description: '线路约束名称，用于标识连接关系'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'showLabel',
|
|
||||||
type: 'boolean',
|
|
||||||
label: '显示标签',
|
|
||||||
default: false,
|
|
||||||
description: '是否显示连线上的约束标签'
|
|
||||||
}
|
}
|
||||||
]
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取组件配置的函数
|
// 获取组件配置的函数
|
||||||
|
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
|
|
||||||
export interface WireItem {
|
|
||||||
id: string;
|
|
||||||
startX: number;
|
|
||||||
startY: number;
|
|
||||||
endX: number;
|
|
||||||
endY: number;
|
|
||||||
startComponentId: string;
|
|
||||||
endComponentId?: string;
|
|
||||||
color?: string;
|
|
||||||
isActive?: boolean;
|
|
||||||
constraint?: string;
|
|
||||||
strokeWidth?: number;
|
|
||||||
routingMode?: 'auto' | 'orthogonal' | 'direct';
|
|
||||||
showLabel?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全局wires状态
|
|
||||||
export const wires = ref<WireItem[]>([]);
|
|
||||||
|
|
||||||
// 添加新连线
|
|
||||||
export function addWire(wire: WireItem) {
|
|
||||||
wires.value.push(wire);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除连线
|
|
||||||
export function deleteWire(wireId: string) {
|
|
||||||
const idx = wires.value.findIndex(w => w.id === wireId);
|
|
||||||
if (idx !== -1) wires.value.splice(idx, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 批量更新与某个引脚相关的所有Wire的约束
|
|
||||||
export function updateWiresConstraintByPin(componentId: string, newConstraint: string) {
|
|
||||||
wires.value.forEach(wire => {
|
|
||||||
if (
|
|
||||||
(wire.startComponentId === componentId) ||
|
|
||||||
(wire.endComponentId === componentId)
|
|
||||||
) {
|
|
||||||
wire.constraint = newConstraint;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查找与某个引脚相关的所有Wire
|
|
||||||
export function findWiresByPin(componentId: string) {
|
|
||||||
return wires.value.filter(wire =>
|
|
||||||
(wire.startComponentId === componentId) ||
|
|
||||||
(wire.endComponentId === componentId)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 临时连线相关状态
|
|
||||||
export const isCreatingWire = ref(false);
|
|
||||||
export const creatingWireStart = reactive({ x: 0, y: 0 });
|
|
||||||
export const creatingWireStartInfo = reactive({
|
|
||||||
componentId: '',
|
|
||||||
pinLabel: '',
|
|
||||||
constraint: ''
|
|
||||||
});
|
|
||||||
export const mousePosition = reactive({ x: 0, y: 0 });
|
|
||||||
|
|
||||||
export function resetWireCreation() {
|
|
||||||
isCreatingWire.value = false;
|
|
||||||
creatingWireStart.x = 0;
|
|
||||||
creatingWireStart.y = 0;
|
|
||||||
creatingWireStartInfo.componentId = '';
|
|
||||||
creatingWireStartInfo.pinLabel = '';
|
|
||||||
creatingWireStartInfo.constraint = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setWireCreationStart(x: number, y: number, componentId: string, pinLabel: string, constraint: string) {
|
|
||||||
isCreatingWire.value = true;
|
|
||||||
creatingWireStart.x = x;
|
|
||||||
creatingWireStart.y = y;
|
|
||||||
creatingWireStartInfo.componentId = componentId;
|
|
||||||
creatingWireStartInfo.pinLabel = pinLabel;
|
|
||||||
creatingWireStartInfo.constraint = constraint;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setMousePosition(x: number, y: number) {
|
|
||||||
mousePosition.x = x;
|
|
||||||
mousePosition.y = y;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 其它Wire相关操作可继续扩展...
|
|
||||||
|
|
@ -5,10 +5,6 @@ import { createPinia } from 'pinia'
|
||||||
|
|
||||||
import App from '@/App.vue'
|
import App from '@/App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import { initConstraintCommunication } from './APIClient'
|
|
||||||
|
|
||||||
const app = createApp(App).use(router).use(createPinia()).mount('#app')
|
const app = createApp(App).use(router).use(createPinia()).mount('#app')
|
||||||
|
|
||||||
// 初始化约束通信
|
|
||||||
initConstraintCommunication();
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
|
|
||||||
// 约束电平状态类型
|
|
||||||
export type ConstraintLevel = 'high' | 'low' | 'undefined';
|
|
||||||
|
|
||||||
// 约束状态存储
|
|
||||||
const constraintStates = reactive<Record<string, ConstraintLevel>>({});
|
|
||||||
|
|
||||||
// 约束颜色映射
|
|
||||||
export const constraintColors = {
|
|
||||||
high: '#ff3333', // 高电平为红色
|
|
||||||
low: '#3333ff', // 低电平为蓝色
|
|
||||||
undefined: '#999999' // 未定义为灰色
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取约束状态
|
|
||||||
export function getConstraintState(constraint: string): ConstraintLevel {
|
|
||||||
if (!constraint) return 'undefined';
|
|
||||||
return constraintStates[constraint] || 'undefined';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置约束状态
|
|
||||||
export function setConstraintState(constraint: string, level: ConstraintLevel) {
|
|
||||||
if (!constraint) return;
|
|
||||||
constraintStates[constraint] = level;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 批量设置约束状态
|
|
||||||
export function batchSetConstraintStates(states: Record<string, ConstraintLevel>) {
|
|
||||||
// 收集发生变化的约束
|
|
||||||
const changedConstraints: [string, ConstraintLevel][] = [];
|
|
||||||
|
|
||||||
// 更新状态并收集变化
|
|
||||||
Object.entries(states).forEach(([constraint, level]) => {
|
|
||||||
if (constraintStates[constraint] !== level) {
|
|
||||||
constraintStates[constraint] = level;
|
|
||||||
changedConstraints.push([constraint, level]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 通知所有变化
|
|
||||||
changedConstraints.forEach(([constraint, level]) => {
|
|
||||||
stateChangeCallbacks.forEach(callback => callback(constraint, level));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取约束对应的颜色
|
|
||||||
export function getConstraintColor(constraint: string): string {
|
|
||||||
const state = getConstraintState(constraint);
|
|
||||||
return constraintColors[state];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除所有约束状态
|
|
||||||
export function clearAllConstraintStates() {
|
|
||||||
Object.keys(constraintStates).forEach(key => {
|
|
||||||
delete constraintStates[key];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取所有约束状态
|
|
||||||
export function getAllConstraintStates(): Record<string, ConstraintLevel> {
|
|
||||||
return { ...constraintStates };
|
|
||||||
}
|
|
||||||
|
|
||||||
// 注册约束状态变化回调
|
|
||||||
const stateChangeCallbacks: ((constraint: string, level: ConstraintLevel) => void)[] = [];
|
|
||||||
|
|
||||||
export function onConstraintStateChange(callback: (constraint: string, level: ConstraintLevel) => void) {
|
|
||||||
stateChangeCallbacks.push(callback);
|
|
||||||
return () => {
|
|
||||||
const index = stateChangeCallbacks.indexOf(callback);
|
|
||||||
if (index > -1) {
|
|
||||||
stateChangeCallbacks.splice(index, 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 触发约束变化
|
|
||||||
export function notifyConstraintChange(constraint: string, level: ConstraintLevel) {
|
|
||||||
setConstraintState(constraint, level);
|
|
||||||
stateChangeCallbacks.forEach(callback => callback(constraint, level));
|
|
||||||
}
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
type="text"
|
type="text"
|
||||||
:placeholder="prop.label || prop.name"
|
:placeholder="prop.label || prop.name"
|
||||||
class="input input-bordered input-sm w-full"
|
class="input input-bordered input-sm w-full"
|
||||||
:value="selectedComponentData.props?.[prop.name]"
|
:value="selectedComponentData.props[prop.name]"
|
||||||
@input="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).value)"
|
@input="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).value)"
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
|
|
@ -58,14 +58,14 @@
|
||||||
type="number"
|
type="number"
|
||||||
:placeholder="prop.label || prop.name"
|
:placeholder="prop.label || prop.name"
|
||||||
class="input input-bordered input-sm w-full"
|
class="input input-bordered input-sm w-full"
|
||||||
:value="selectedComponentData.props?.[prop.name]"
|
:value="selectedComponentData.props[prop.name]"
|
||||||
@input="updateComponentProp(selectedComponentData.id, prop.name, parseFloat(($event.target as HTMLInputElement).value) || prop.default)"
|
@input="updateComponentProp(selectedComponentData.id, prop.name, parseFloat(($event.target as HTMLInputElement).value) || prop.default)"
|
||||||
/> <!-- 可以为 boolean 添加 checkbox，为 color 添加 color picker 等 -->
|
/> <!-- 可以为 boolean 添加 checkbox，为 color 添加 color picker 等 -->
|
||||||
<div v-else-if="prop.type === 'boolean'" class="flex items-center">
|
<div v-else-if="prop.type === 'boolean'" class="flex items-center">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="checkbox checkbox-sm mr-2"
|
class="checkbox checkbox-sm mr-2"
|
||||||
:checked="selectedComponentData.props?.[prop.name]"
|
:checked="selectedComponentData.props[prop.name]"
|
||||||
@change="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).checked)"
|
@change="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).checked)"
|
||||||
/>
|
/>
|
||||||
<span>{{ prop.label || prop.name }}</span>
|
<span>{{ prop.label || prop.name }}</span>
|
||||||
|
|
@ -73,12 +73,12 @@
|
||||||
<select
|
<select
|
||||||
v-else-if="prop.type === 'select' && prop.options"
|
v-else-if="prop.type === 'select' && prop.options"
|
||||||
class="select select-bordered select-sm w-full"
|
class="select select-bordered select-sm w-full"
|
||||||
:value="selectedComponentData.props?.[prop.name]"
|
:value="selectedComponentData.props[prop.name]"
|
||||||
@change="(event) => {
|
@change="(event) => {
|
||||||
const selectElement = event.target as HTMLSelectElement;
|
const selectElement = event.target as HTMLSelectElement;
|
||||||
const value = selectElement.value;
|
const value = selectElement.value;
|
||||||
console.log('选择的值:', value, '类型:', typeof value);
|
console.log('选择的值:', value, '类型:', typeof value);
|
||||||
if (selectedComponentData) {updateComponentProp(selectedComponentData.id, prop.name, value);}
|
updateComponentProp(selectedComponentData.id, prop.name, value);
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<option v-for="option in prop.options" :key="option.value" :value="option.value">
|
<option v-for="option in prop.options" :key="option.value" :value="option.value">
|
||||||
|
|
@ -143,7 +143,6 @@ interface ComponentModule {
|
||||||
type: string;
|
type: string;
|
||||||
label?: string;
|
label?: string;
|
||||||
default: any;
|
default: any;
|
||||||
options?: Array<{ value: any; label: string }>; // 添加 options 字段用于 select 类型
|
|
||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -345,7 +344,7 @@ function updateComponentProp(componentId: string | { id: string; propName: strin
|
||||||
// 处理连线创建事件
|
// 处理连线创建事件
|
||||||
function handleWireCreated(wireData: any) {
|
function handleWireCreated(wireData: any) {
|
||||||
console.log('Wire created:', wireData);
|
console.log('Wire created:', wireData);
|
||||||
// 连线已在DiagramCanvas.vue中完成约束处理
|
// 可以在这里添加连线创建的相关逻辑
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理连线删除事件
|
// 处理连线删除事件
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue