feat: frontend add boundary scan
This commit is contained in:
parent
2a3ef1ea7d
commit
5042bf8ce5
|
|
@ -160,6 +160,7 @@ public class JtagController : ControllerBase
|
|||
/// <param name="address"> 设备地址 </param>
|
||||
/// <param name="port"> 设备端口 </param>
|
||||
[HttpGet("GetDeviceIDCode")]
|
||||
[EnableCors("Users")]
|
||||
[ProducesResponseType(typeof(uint), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
|
||||
public async ValueTask<IResult> GetDeviceIDCode(string address, int port)
|
||||
|
|
@ -365,7 +366,7 @@ public class JtagController : ControllerBase
|
|||
/// <returns>[TODO:return]</returns>
|
||||
[HttpPost("BoundaryScanLogicalPorts")]
|
||||
[EnableCors("Users")]
|
||||
[ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(Dictionary<string, bool>), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
|
||||
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
|
||||
public async ValueTask<IResult> BoundaryScanLogicalPorts(string address, int port)
|
||||
|
|
|
|||
|
|
@ -659,7 +659,7 @@ export class JtagClient {
|
|||
* @param port (optional) [TODO:parameter]
|
||||
* @return [TODO:return]
|
||||
*/
|
||||
boundaryScanLogicalPorts(address: string | undefined, port: number | undefined): Promise<boolean> {
|
||||
boundaryScanLogicalPorts(address: string | undefined, port: number | undefined): Promise<{ [key: string]: boolean; }> {
|
||||
let url_ = this.baseUrl + "/api/Jtag/BoundaryScanLogicalPorts?";
|
||||
if (address === null)
|
||||
throw new Error("The parameter 'address' cannot be null.");
|
||||
|
|
@ -683,15 +683,23 @@ export class JtagClient {
|
|||
});
|
||||
}
|
||||
|
||||
protected processBoundaryScanLogicalPorts(response: Response): Promise<boolean> {
|
||||
protected processBoundaryScanLogicalPorts(response: Response): Promise<{ [key: string]: boolean; }> {
|
||||
const status = response.status;
|
||||
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||
if (status === 200) {
|
||||
return response.text().then((_responseText) => {
|
||||
let result200: any = null;
|
||||
let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
result200 = resultData200 !== undefined ? resultData200 : <any>null;
|
||||
|
||||
if (resultData200) {
|
||||
result200 = {} as any;
|
||||
for (let key in resultData200) {
|
||||
if (resultData200.hasOwnProperty(key))
|
||||
(<any>result200)![key] = resultData200[key] !== undefined ? resultData200[key] : <any>null;
|
||||
}
|
||||
}
|
||||
else {
|
||||
result200 = <any>null;
|
||||
}
|
||||
return result200;
|
||||
});
|
||||
} else if (status === 400) {
|
||||
|
|
@ -714,7 +722,7 @@ export class JtagClient {
|
|||
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<boolean>(null as any);
|
||||
return Promise.resolve<{ [key: string]: boolean; }>(null as any);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
<div class="button-container" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:width="width"
|
||||
:height="height"
|
||||
viewBox="400 400 800 800"
|
||||
class="mechanical-button"
|
||||
>
|
||||
<div class="button-container" :style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
position: 'relative',
|
||||
}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="400 400 800 800"
|
||||
class="mechanical-button">
|
||||
<!-- defs 和按钮底座保持不变 -->
|
||||
<defs>
|
||||
<filter id="btn-shadow">
|
||||
|
|
@ -26,7 +25,8 @@
|
|||
<stop stop-color="#171717" offset="0" />
|
||||
<stop stop-color="#4b4b4b" offset="1" />
|
||||
</linearGradient>
|
||||
</defs> <!-- 按钮底座 -->
|
||||
</defs>
|
||||
<!-- 按钮底座 -->
|
||||
<rect width="800" height="800" x="400" y="400" fill="#464646" rx="20" />
|
||||
<rect width="700" height="700" x="450" y="450" fill="#eaeaea" rx="20" />
|
||||
|
||||
|
|
@ -38,65 +38,50 @@
|
|||
|
||||
<!-- 按钮主体 -->
|
||||
<circle r="220" cx="800" cy="800" fill="black" filter="url(#btn-shadow)" />
|
||||
<circle
|
||||
:r="btnHeight"
|
||||
cx="800"
|
||||
cy="800"
|
||||
:fill="isKeyPressed ? 'url(#pressed)' : 'url(#normal)'"
|
||||
fill-opacity="0.9"
|
||||
@mousedown="toggleButtonState(true)"
|
||||
@mouseup="toggleButtonState(false)"
|
||||
@mouseleave="toggleButtonState(false)"
|
||||
style="pointer-events: auto; transition: all 20ms ease-in-out; cursor: pointer;"
|
||||
/>
|
||||
<circle :r="btnHeight" cx="800" cy="800" :fill="isKeyPressed ? 'url(#pressed)' : 'url(#normal)'"
|
||||
fill-opacity="0.9" @mousedown="toggleButtonState(true)" @mouseup="toggleButtonState(false)"
|
||||
@mouseleave="toggleButtonState(false)" style="
|
||||
pointer-events: auto;
|
||||
transition: all 20ms ease-in-out;
|
||||
cursor: pointer;
|
||||
" />
|
||||
<!-- 按键文字 - 仅显示绑定的按键 -->
|
||||
<text
|
||||
v-if="bindKeyDisplay"
|
||||
x="800"
|
||||
y="800"
|
||||
font-size="310"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="central"
|
||||
fill="#ccc"
|
||||
style="font-family: Arial; filter: url(#btn-shadow); user-select: none; pointer-events: none; mix-blend-mode: overlay;"
|
||||
>
|
||||
<text v-if="bindKeyDisplay" x="800" y="800" font-size="310" text-anchor="middle" dominant-baseline="central"
|
||||
fill="#ccc" style="
|
||||
font-family: Arial;
|
||||
filter: url(#btn-shadow);
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: overlay;
|
||||
">
|
||||
{{ bindKeyDisplay }}
|
||||
</text>
|
||||
</svg>
|
||||
|
||||
<!-- 渲染自定义引脚数组 -->
|
||||
<div v-for="pin in props.pins" :key="pin.pinId"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${pin.x * props.size}px`,
|
||||
top: `${pin.y * props.size}px`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 3,
|
||||
pointerEvents: 'auto'
|
||||
}"
|
||||
:data-pin-wrapper="`${pin.pinId}`"
|
||||
:data-pin-x="`${pin.x * props.size}`"
|
||||
:data-pin-y="`${pin.y * props.size}`">
|
||||
<Pin
|
||||
:ref="el => { if(el) pinRefs[pin.pinId] = el }"
|
||||
direction="output"
|
||||
type="digital"
|
||||
:label="pin.pinId"
|
||||
:constraint="pin.constraint"
|
||||
:pinId="pin.pinId"
|
||||
:size="0.8"
|
||||
:componentId="props.componentId"
|
||||
@value-change="handlePinValueChange"
|
||||
@pin-click="handlePinClick"
|
||||
/>
|
||||
<div v-for="pin in props.pins" :key="pin.pinId" :style="{
|
||||
position: 'absolute',
|
||||
left: `${pin.x * props.size}px`,
|
||||
top: `${pin.y * props.size}px`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 3,
|
||||
pointerEvents: 'auto',
|
||||
}" :data-pin-wrapper="`${pin.pinId}`" :data-pin-x="`${pin.x * props.size}`"
|
||||
:data-pin-y="`${pin.y * props.size}`">
|
||||
<Pin :ref="(el) => {
|
||||
if (el) pinRefs[pin.pinId] = el;
|
||||
}
|
||||
" direction="output" type="digital" :label="pin.pinId" :constraint="pin.constraint" :pinId="pin.pinId"
|
||||
:size="0.8" :componentId="props.componentId" @value-change="handlePinValueChange" @pin-click="handlePinClick" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import Pin from './Pin.vue';
|
||||
import { notifyConstraintChange } from '../../stores/constraints';
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import Pin from "./Pin.vue";
|
||||
import { useConstraintsStore } from "../../stores/constraints";
|
||||
const { notifyConstraintChange } = useConstraintsStore();
|
||||
|
||||
// 存储多个Pin引用
|
||||
const pinRefs = ref<Record<string, any>>({});
|
||||
|
|
@ -116,16 +101,16 @@ interface ButtonProps {
|
|||
|
||||
const props = withDefaults(defineProps<ButtonProps>(), {
|
||||
size: 1,
|
||||
bindKey: '',
|
||||
componentId: 'button-default',
|
||||
bindKey: "",
|
||||
componentId: "button-default",
|
||||
pins: () => [
|
||||
{
|
||||
pinId: 'BTN',
|
||||
constraint: '',
|
||||
pinId: "BTN",
|
||||
constraint: "",
|
||||
x: 80,
|
||||
y: 140
|
||||
}
|
||||
]
|
||||
y: 140,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 计算实际宽高
|
||||
|
|
@ -133,17 +118,19 @@ const width = computed(() => 160 * props.size);
|
|||
const height = computed(() => 160 * props.size);
|
||||
|
||||
// 显示绑定的按键
|
||||
const bindKeyDisplay = computed(() => props.bindKey ? props.bindKey.toUpperCase() : '');
|
||||
const bindKeyDisplay = computed(() =>
|
||||
props.bindKey ? props.bindKey.toUpperCase() : "",
|
||||
);
|
||||
|
||||
// 定义组件发出的事件
|
||||
const emit = defineEmits([
|
||||
'update:bindKey',
|
||||
'update:constraint',
|
||||
'press',
|
||||
'release',
|
||||
'click',
|
||||
'value-change',
|
||||
'pin-click'
|
||||
"update:bindKey",
|
||||
"update:constraint",
|
||||
"press",
|
||||
"release",
|
||||
"click",
|
||||
"value-change",
|
||||
"pin-click",
|
||||
]);
|
||||
|
||||
// 内部状态
|
||||
|
|
@ -153,12 +140,12 @@ const colorMatrix = ref("1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0");
|
|||
|
||||
// 处理Pin值变化
|
||||
function handlePinValueChange(value: any) {
|
||||
emit('value-change', value);
|
||||
emit("value-change", value);
|
||||
}
|
||||
|
||||
// 处理Pin点击事件
|
||||
function handlePinClick(info: any) {
|
||||
emit('pin-click', info);
|
||||
emit("pin-click", info);
|
||||
}
|
||||
|
||||
// --- 按键状态逻辑 ---
|
||||
|
|
@ -168,24 +155,24 @@ function toggleButtonState(isPressed: boolean) {
|
|||
|
||||
// 发出事件通知父组件
|
||||
if (isPressed) {
|
||||
emit('press');
|
||||
emit("press");
|
||||
// 如果有约束，通知约束状态变化为高电平
|
||||
// 对所有引脚应用相同的状态
|
||||
if (props.pins) {
|
||||
props.pins.forEach(pin => {
|
||||
props.pins.forEach((pin) => {
|
||||
if (pin.constraint) {
|
||||
notifyConstraintChange(pin.constraint, 'high');
|
||||
notifyConstraintChange(pin.constraint, "high");
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
emit('release');
|
||||
emit('click');
|
||||
emit("release");
|
||||
emit("click");
|
||||
// 如果有约束，通知约束状态变化为低电平
|
||||
if (props.pins) {
|
||||
props.pins.forEach(pin => {
|
||||
props.pins.forEach((pin) => {
|
||||
if (pin.constraint) {
|
||||
notifyConstraintChange(pin.constraint, 'low');
|
||||
notifyConstraintChange(pin.constraint, "low");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -202,11 +189,11 @@ function handleKeyDown(event: KeyboardEvent) {
|
|||
|
||||
// --- 生命周期钩子 ---
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
|
||||
// 向外暴露方法
|
||||
|
|
@ -216,30 +203,38 @@ defineExpose({
|
|||
// 按钮特有属性
|
||||
bindKey: props.bindKey,
|
||||
componentId: props.componentId,
|
||||
pins: props.pins
|
||||
pins: props.pins,
|
||||
}),
|
||||
// 获取引脚位置
|
||||
getPinPosition: (pinId: string) => {
|
||||
console.log(`[MechanicalButton] 调用getPinPosition，寻找pinId: ${pinId}`);
|
||||
console.log(`[MechanicalButton] 组件ID: ${props.componentId}, 当前尺寸: ${props.size}, 组件宽高: ${width.value}x${height.value}`);
|
||||
console.log(
|
||||
`[MechanicalButton] 组件ID: ${props.componentId}, 当前尺寸: ${props.size}, 组件宽高: ${width.value}x${height.value}`,
|
||||
);
|
||||
console.log(`[MechanicalButton] 当前存在的pins:`, props.pins);
|
||||
|
||||
// 如果是自定义的引脚ID
|
||||
if (props.pins && props.pins.length > 0) {
|
||||
const customPin = props.pins.find(p => p.pinId === pinId);
|
||||
const customPin = props.pins.find((p) => p.pinId === pinId);
|
||||
|
||||
if (customPin) {
|
||||
console.log(`[MechanicalButton] 找到自定义引脚: ${pinId}，配置位置:`, { x: customPin.x, y: customPin.y });
|
||||
console.log(`[MechanicalButton] 找到自定义引脚: ${pinId}，配置位置:`, {
|
||||
x: customPin.x,
|
||||
y: customPin.y,
|
||||
});
|
||||
|
||||
// 考虑组件尺寸的缩放
|
||||
// 这里的x和y是针对标准尺寸（size=1）的坐标，需要根据实际size调整
|
||||
const scaledX = customPin.x * props.size;
|
||||
const scaledY = customPin.y * props.size;
|
||||
|
||||
console.log(`[MechanicalButton] 返回缩放后的坐标:`, { x: scaledX, y: scaledY });
|
||||
console.log(`[MechanicalButton] 返回缩放后的坐标:`, {
|
||||
x: scaledX,
|
||||
y: scaledY,
|
||||
});
|
||||
return {
|
||||
x: scaledX,
|
||||
y: scaledY
|
||||
y: scaledY,
|
||||
};
|
||||
} else {
|
||||
console.log(`[MechanicalButton] 未找到pinId: ${pinId}的引脚配置`);
|
||||
|
|
@ -249,7 +244,7 @@ defineExpose({
|
|||
}
|
||||
console.log(`[MechanicalButton] 返回null，未找到引脚`);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -258,15 +253,15 @@ defineExpose({
|
|||
export function getDefaultProps() {
|
||||
return {
|
||||
size: 1,
|
||||
bindKey: '',
|
||||
bindKey: "",
|
||||
pins: [
|
||||
{
|
||||
pinId: 'BTN',
|
||||
constraint: '',
|
||||
pinId: "BTN",
|
||||
constraint: "",
|
||||
x: 80,
|
||||
y: 140
|
||||
}
|
||||
]
|
||||
y: 140,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));
|
|||
const width = computed(() => 800 * props.size);
|
||||
const height = computed(() => 600 * props.size);
|
||||
|
||||
// Global store
|
||||
const eqps = useEquipments();
|
||||
|
||||
const bitstreamFile = ref<File | null>();
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<p class="grow">Jtag Port: {{ props.jtagPort }}</p>
|
||||
<div class="flex justify-between grow">
|
||||
<p>IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0") }}</p>
|
||||
<button class="btn btn-circle w-8 h-8" :onclick="getIDCode">
|
||||
<svg class="icon opacity-70" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4865" width="200" height="200">
|
||||
<button class="btn btn-circle w-6 h-6" :onclick="getIDCode">
|
||||
<svg class="icon opacity-70 fill-primary" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="4865" width="200" height="200">
|
||||
<path
|
||||
d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
|
||||
p-id="4866"></path>
|
||||
|
|
@ -19,6 +19,11 @@
|
|||
<div class="divider"></div>
|
||||
<UploadCard class="bg-base-200" :upload-event="uploadBitstream" :download-event="downloadBitstream">
|
||||
</UploadCard>
|
||||
<div class="divider"></div>
|
||||
<button class="btn w-full btn-primary" :class="isEnableJtagBoundaryScan ? '' : 'btn-soft'"
|
||||
:onclick="toggleJtagBoundaryScan">
|
||||
{{ isEnableJtagBoundaryScan ? "关闭边界扫描" : "启动边界扫描" }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,6 +32,10 @@ import { JtagClient } from "@/APIClient";
|
|||
import z from "zod";
|
||||
import UploadCard from "@/components/UploadCard.vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import {
|
||||
useConstraintsStore,
|
||||
type ConstraintLevel,
|
||||
} from "@/stores/constraints";
|
||||
import { isUndefined, toNumber } from "lodash";
|
||||
import { ref, computed, watch } from "vue";
|
||||
|
||||
|
|
@ -37,8 +46,12 @@ interface CapsProps {
|
|||
|
||||
const props = withDefaults(defineProps<CapsProps>(), {});
|
||||
|
||||
const jtagController = new JtagClient();
|
||||
// Global Stores
|
||||
const dialog = useDialogStore();
|
||||
const constrainsts = useConstraintsStore();
|
||||
|
||||
const jtagController = new JtagClient();
|
||||
const isEnableJtagBoundaryScan = ref(false);
|
||||
|
||||
// 使用传入的属性或默认值
|
||||
const jtagIDCode = ref(0);
|
||||
|
|
@ -47,6 +60,28 @@ const boardPort = computed(() =>
|
|||
isUndefined(props.jtagPort) ? undefined : toNumber(props.jtagPort),
|
||||
);
|
||||
|
||||
async function toggleJtagBoundaryScan() {
|
||||
isEnableJtagBoundaryScan.value = !isEnableJtagBoundaryScan.value;
|
||||
if (isEnableJtagBoundaryScan.value) jtagBoundaryScan();
|
||||
}
|
||||
|
||||
async function jtagBoundaryScan() {
|
||||
try {
|
||||
const portStates = await jtagController.boundaryScanLogicalPorts(
|
||||
boardAddress.value,
|
||||
boardPort.value,
|
||||
);
|
||||
|
||||
constrainsts.batchSetConstraintStates(portStates);
|
||||
} catch (error) {
|
||||
dialog.error("边界扫描发生错误");
|
||||
console.error(error);
|
||||
isEnableJtagBoundaryScan.value = false;
|
||||
} finally {
|
||||
if (isEnableJtagBoundaryScan.value) setTimeout(jtagBoundaryScan, 100);
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadBitstream(event: Event, bitstream: File) {
|
||||
if (!isUndefined(boardAddress.value) || !isUndefined(boardPort.value)) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="chip-container" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }"> <svg
|
||||
xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 400 400" class="fbg676-chip">
|
||||
<div class="chip-container" :style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
position: 'relative',
|
||||
}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 400 400" class="fbg676-chip">
|
||||
<!-- 芯片外边框 - 用多段path代替rect，这样可以实现缺角 -->
|
||||
<path d="M30,0 H390 Q400,0 400,10 V390 Q400,400 390,400 H10 Q0,400 0,390 V30 L30,0 Z" fill="#1C4E2D" />
|
||||
|
||||
|
|
@ -12,18 +16,21 @@
|
|||
position: 'absolute',
|
||||
left: `${(pin.x || 0) * props.size * 0.37}px`,
|
||||
top: `${(pin.y || 0) * props.size * 0.37}px`,
|
||||
transform: 'translate(-50%, -50%)'
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}" :data-pin-wrapper="`${pin.pinId}`" :data-pin-x="`${(pin.x || 0) * props.size * 0.37}`"
|
||||
:data-pin-y="`${(pin.y || 0) * props.size * 0.37}`">
|
||||
<Pin :ref="el => { if (el) pinRefs[pin.pinId] = el }" :label="pin.pinId" :constraint="pin.constraint"
|
||||
:pinId="pin.pinId" :size="0.35" @pin-click="$emit('pin-click', $event)" />
|
||||
<Pin :ref="(el) => {
|
||||
if (el) pinRefs[pin.pinId] = el;
|
||||
}
|
||||
" :label="pin.pinId" :constraint="pin.constraint" :pinId="pin.pinId" :size="0.35"
|
||||
@pin-click="$emit('pin-click', $event)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import Pin from './Pin.vue';
|
||||
import { ref, computed } from "vue";
|
||||
import Pin from "./Pin.vue";
|
||||
|
||||
// 存储多个Pin引用
|
||||
const pinRefs = ref<Record<string, any>>({});
|
||||
|
|
@ -34,14 +41,14 @@ interface ChipProps {
|
|||
pins?: {
|
||||
pinId: string;
|
||||
constraint: string;
|
||||
x?: number; // x坐标现在是可选的
|
||||
y?: number; // y坐标现在是可选的
|
||||
x?: number; // x坐标现在是可选的
|
||||
y?: number; // y坐标现在是可选的
|
||||
}[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ChipProps>(), {
|
||||
size: 1,
|
||||
pins: () => []
|
||||
pins: () => [],
|
||||
});
|
||||
|
||||
// 计算尺寸
|
||||
|
|
@ -90,9 +97,9 @@ const computedPins = computed(() => {
|
|||
for (let col = 0; col < pinColumns; col++) {
|
||||
pins.push({
|
||||
pinId: `pin_${pinIndex++}`,
|
||||
constraint: '',
|
||||
constraint: "",
|
||||
x: xStart + col * xStep,
|
||||
y: yStart + row * yStep
|
||||
y: yStart + row * yStep,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -102,15 +109,15 @@ const computedPins = computed(() => {
|
|||
|
||||
defineExpose({
|
||||
getInfo: () => ({
|
||||
chipType: 'PG2L100H_FBG676',
|
||||
direction: 'inout',
|
||||
type: 'digital',
|
||||
pins: computedPins.value
|
||||
chipType: "PG2L100H_FBG676",
|
||||
direction: "inout",
|
||||
type: "digital",
|
||||
pins: computedPins.value,
|
||||
}),
|
||||
getPinPosition: (pinId: string) => {
|
||||
// 返回指定引脚ID的位置
|
||||
if (computedPins.value && computedPins.value.length > 0) {
|
||||
const customPin = computedPins.value.find(p => p.pinId === pinId);
|
||||
const customPin = computedPins.value.find((p) => p.pinId === pinId);
|
||||
|
||||
if (customPin && customPin.x !== undefined && customPin.y !== undefined) {
|
||||
// 考虑组件尺寸的缩放，应用0.37的系数确保居中对齐
|
||||
|
|
@ -119,13 +126,13 @@ defineExpose({
|
|||
|
||||
return {
|
||||
x: scaledX,
|
||||
y: scaledY
|
||||
y: scaledY,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -134,7 +141,7 @@ defineExpose({
|
|||
export function getDefaultProps() {
|
||||
return {
|
||||
size: 1,
|
||||
pins: [] // 默认不提供引脚，由computedPins计算生成
|
||||
pins: [], // 默认不提供引脚，由computedPins计算生成
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,14 @@
|
|||
<template>
|
||||
<svg
|
||||
:width="width"
|
||||
:height="height"
|
||||
:viewBox="'0 0 ' + viewBoxWidth + ' ' + viewBoxHeight"
|
||||
class="pin-component"
|
||||
> <g :transform="`translate(${viewBoxWidth/2}, ${viewBoxHeight/2})`">
|
||||
<svg :width="width" :height="height" :viewBox="'0 0 ' + viewBoxWidth + ' ' + viewBoxHeight" class="pin-component">
|
||||
<g :transform="`translate(${viewBoxWidth / 2}, ${viewBoxHeight / 2})`">
|
||||
<g>
|
||||
<g transform="translate(-12.5, -12.5)"> <!-- 添加一个透明的更大区域来增强点击能力，但比原来小一点 -->
|
||||
<circle
|
||||
cx="12.5"
|
||||
cy="12.5"
|
||||
r="5"
|
||||
fill="transparent"
|
||||
class="interactive"
|
||||
@click.stop="handlePinClick"
|
||||
@mousedown.stop
|
||||
@touchstart.stop
|
||||
:data-pin-element="`${props.pinId}`"
|
||||
<g transform="translate(-12.5, -12.5)">
|
||||
<!-- 添加一个透明的更大区域来增强点击能力，但比原来小一点 -->
|
||||
<circle cx="12.5" cy="12.5" r="5" fill="transparent" class="interactive" @click.stop="handlePinClick"
|
||||
@mousedown.stop @touchstart.stop :data-pin-element="`${props.pinId}`"
|
||||
:data-component-id="props.componentId" />
|
||||
<!-- 实际可见的引脚圆点 -->
|
||||
<circle
|
||||
:style="{ fill: pinColor }"
|
||||
cx="12.5"
|
||||
cy="12.5"
|
||||
r="3.75"
|
||||
pointer-events="none"
|
||||
<circle :style="{ fill: pinColor }" cx="12.5" cy="12.5" r="3.75" pointer-events="none"
|
||||
:data-pin-visual="`${props.pinId}`" />
|
||||
</g>
|
||||
</g>
|
||||
|
|
@ -33,32 +17,33 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, reactive, watch, onMounted, onUnmounted } from 'vue';
|
||||
import { getConstraintColor, getConstraintState, onConstraintStateChange, notifyConstraintChange } from '../../stores/constraints';
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from "vue";
|
||||
import { useConstraintsStore } from "../../stores/constraints";
|
||||
const { getConstraintColor, onConstraintStateChange } = useConstraintsStore();
|
||||
|
||||
interface Props {
|
||||
size?: number;
|
||||
label?: string;
|
||||
constraint?: string;
|
||||
direction?: 'input' | 'output' | 'inout';
|
||||
type?: 'digital' | 'analog';
|
||||
direction?: "input" | "output" | "inout";
|
||||
type?: "digital" | "analog";
|
||||
pinId?: string; // 添加引脚ID属性，用于唯一标识
|
||||
componentId?: string; // 添加组件ID属性，关联到父组件
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 1,
|
||||
label: 'PIN',
|
||||
constraint: '',
|
||||
direction: 'input',
|
||||
type: 'digital',
|
||||
pinId: 'pin-default', // 默认ID
|
||||
componentId: '' // 默认空字符串
|
||||
label: "PIN",
|
||||
constraint: "",
|
||||
direction: "input",
|
||||
type: "digital",
|
||||
pinId: "pin-default", // 默认ID
|
||||
componentId: "", // 默认空字符串
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'value-change',
|
||||
'pin-click' // 新增Pin点击事件
|
||||
"value-change",
|
||||
"pin-click", // 新增Pin点击事件
|
||||
]);
|
||||
|
||||
// 内部状态
|
||||
|
|
@ -71,15 +56,15 @@ function handlePinClick(event: MouseEvent) {
|
|||
const rect = target.getBoundingClientRect();
|
||||
const pinCenter = {
|
||||
x: rect.left + rect.width / 2,
|
||||
y: rect.top + rect.height / 2
|
||||
y: rect.top + rect.height / 2,
|
||||
};
|
||||
emit('pin-click', {
|
||||
emit("pin-click", {
|
||||
label: props.label,
|
||||
constraint: props.constraint,
|
||||
type: props.type,
|
||||
direction: props.direction,
|
||||
position: pinCenter,
|
||||
originalEvent: event
|
||||
originalEvent: event,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +74,7 @@ const viewBoxWidth = computed(() => 15);
|
|||
const viewBoxHeight = computed(() => 15);
|
||||
|
||||
const getColorByType = computed(() => {
|
||||
return props.type === 'analog' ? '#2a6099' : '#444';
|
||||
return props.type === "analog" ? "#2a6099" : "#444";
|
||||
});
|
||||
|
||||
// 根据约束电平状态计算引脚颜色
|
||||
|
|
@ -105,7 +90,7 @@ onMounted(() => {
|
|||
if (props.constraint) {
|
||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
||||
if (constraint === props.constraint) {
|
||||
emit('value-change', { constraint, level });
|
||||
emit("value-change", { constraint, level });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -117,27 +102,30 @@ onUnmounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
watch(() => props.constraint, (newConstraint, oldConstraint) => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
unsubscribe = null;
|
||||
}
|
||||
if (newConstraint) {
|
||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
||||
if (constraint === newConstraint) {
|
||||
emit('value-change', { constraint, level });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
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) {
|
||||
if (props.type !== 'analog') return;
|
||||
if (props.type !== "analog") return;
|
||||
analogValue.value = Math.max(0, Math.min(1, value));
|
||||
emit('value-change', {
|
||||
emit("value-change", {
|
||||
label: props.label,
|
||||
constraint: props.constraint,
|
||||
value: analogValue.value
|
||||
value: analogValue.value,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -149,16 +137,16 @@ defineExpose({
|
|||
constraint: props.constraint,
|
||||
direction: props.direction,
|
||||
type: props.type,
|
||||
pinId: props.pinId
|
||||
pinId: props.pinId,
|
||||
}),
|
||||
getPinPosition: () => {
|
||||
// Pin组件自身的getPinPosition应该返回相对于父组件的位置
|
||||
// 在MechanicalButton等组件中已经明确传递了position，所以这里实际上可能不会被使用
|
||||
return {
|
||||
x: viewBoxWidth.value / 2,
|
||||
y: viewBoxHeight.value / 2
|
||||
y: viewBoxHeight.value / 2,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -167,20 +155,20 @@ defineExpose({
|
|||
export function getDefaultProps() {
|
||||
return {
|
||||
size: 1,
|
||||
label: 'PIN',
|
||||
constraint: '',
|
||||
direction: 'input',
|
||||
type: 'digital',
|
||||
pinId: 'pin-default',
|
||||
componentId: '',
|
||||
label: "PIN",
|
||||
constraint: "",
|
||||
direction: "input",
|
||||
type: "digital",
|
||||
pinId: "pin-default",
|
||||
componentId: "",
|
||||
pins: [
|
||||
{
|
||||
pinId: 'PIN',
|
||||
constraint: '',
|
||||
pinId: "PIN",
|
||||
constraint: "",
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
]
|
||||
y: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -190,18 +178,25 @@ export function getDefaultProps() {
|
|||
display: block;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
z-index: 5; /* 提高引脚组件的z-index */
|
||||
pointer-events: auto; /* 确保可以接收点击事件 */
|
||||
overflow: visible; /* 确保可以看到引脚 */
|
||||
z-index: 5;
|
||||
/* 提高引脚组件的z-index */
|
||||
pointer-events: auto;
|
||||
/* 确保可以接收点击事件 */
|
||||
overflow: visible;
|
||||
/* 确保可以看到引脚 */
|
||||
}
|
||||
|
||||
.interactive {
|
||||
cursor: pointer;
|
||||
transition: filter 0.2s;
|
||||
pointer-events: auto; /* 确保可以接收点击事件 */
|
||||
pointer-events: auto;
|
||||
/* 确保可以接收点击事件 */
|
||||
}
|
||||
|
||||
.interactive:hover {
|
||||
filter: brightness(1.2);
|
||||
stroke: rgba(255, 255, 255, 0.3); /* 添加边框以便更容易看到点击区域 */
|
||||
stroke: rgba(255, 255, 255, 0.3);
|
||||
/* 添加边框以便更容易看到点击区域 */
|
||||
stroke-width: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,9 +64,11 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
|
||||
import { getConstraintState, onConstraintStateChange } from '../../stores/constraints';
|
||||
import { useConstraintsStore } from '../../stores/constraints';
|
||||
import Pin from './Pin.vue';
|
||||
|
||||
const {getConstraintState, onConstraintStateChange} = useConstraintsStore();
|
||||
|
||||
// 存储多个Pin引用
|
||||
const pinRefs = ref<Record<string, any>>({});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,106 +1,75 @@
|
|||
<template>
|
||||
<div class="seven-segment-display" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }"> <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:width="width"
|
||||
:height="height"
|
||||
viewBox="0 0 120 220"
|
||||
class="display"
|
||||
>
|
||||
<div class="seven-segment-display" :style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
position: 'relative',
|
||||
}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 120 220" class="display">
|
||||
<!-- 数码管基座 -->
|
||||
<rect width="120" height="180" x="0" y="0" fill="#222" rx="10" ry="10" />
|
||||
<rect width="110" height="170" x="5" y="5" fill="#333" rx="5" ry="5" />
|
||||
<!-- 7段 + 小数点，每个段由多边形表示，重新设计点位置使其更接近实际数码管 -->
|
||||
<!-- 7段 + 小数点，每个段由多边形表示，重新设计点位置使其更接近实际数码管 -->
|
||||
<!-- a段 (顶部横线) -->
|
||||
<polygon
|
||||
:points="'30,20 90,20 98,28 82,36 38,36 22,28'"
|
||||
<polygon :points="'30,20 90,20 98,28 82,36 38,36 22,28'"
|
||||
:fill="isSegmentActive('a') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('a') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
:style="{ opacity: isSegmentActive('a') ? 1 : 0.15 }" class="segment" />
|
||||
|
||||
<!-- b段 (右上竖线) -->
|
||||
<polygon
|
||||
:points="'100,30 108,38 108,82 100,90 92,82 92,38'"
|
||||
<polygon :points="'100,30 108,38 108,82 100,90 92,82 92,38'"
|
||||
:fill="isSegmentActive('b') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('b') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
:style="{ opacity: isSegmentActive('b') ? 1 : 0.15 }" class="segment" />
|
||||
|
||||
<!-- c段 (右下竖线) -->
|
||||
<polygon
|
||||
:points="'100,90 108,98 108,142 100,150 92,142 92,98'"
|
||||
<polygon :points="'100,90 108,98 108,142 100,150 92,142 92,98'"
|
||||
:fill="isSegmentActive('c') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('c') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
:style="{ opacity: isSegmentActive('c') ? 1 : 0.15 }" class="segment" />
|
||||
|
||||
<!-- d段 (底部横线) -->
|
||||
<polygon
|
||||
:points="'30,160 90,160 98,152 82,144 38,144 22,152'"
|
||||
<polygon :points="'30,160 90,160 98,152 82,144 38,144 22,152'"
|
||||
:fill="isSegmentActive('d') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('d') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
:style="{ opacity: isSegmentActive('d') ? 1 : 0.15 }" class="segment" />
|
||||
|
||||
<!-- e段 (左下竖线) -->
|
||||
<polygon
|
||||
:points="'20,90 28,98 28,142 20,150 12,142 12,98'"
|
||||
<polygon :points="'20,90 28,98 28,142 20,150 12,142 12,98'"
|
||||
:fill="isSegmentActive('e') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('e') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
:style="{ opacity: isSegmentActive('e') ? 1 : 0.15 }" class="segment" />
|
||||
|
||||
<!-- f段 (左上竖线) -->
|
||||
<polygon
|
||||
:points="'20,30 28,38 28,82 20,90 12,82 12,38'"
|
||||
<polygon :points="'20,30 28,38 28,82 20,90 12,82 12,38'"
|
||||
:fill="isSegmentActive('f') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('f') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
:style="{ opacity: isSegmentActive('f') ? 1 : 0.15 }" class="segment" />
|
||||
|
||||
<!-- g段 (中间横线) -->
|
||||
<polygon
|
||||
:points="'30,90 38,82 82,82 90,90 82,98 38,98'"
|
||||
<polygon :points="'30,90 38,82 82,82 90,90 82,98 38,98'"
|
||||
:fill="isSegmentActive('g') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('g') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/> <!-- dp段 (小数点) -->
|
||||
<circle
|
||||
cx="108"
|
||||
cy="154"
|
||||
r="6"
|
||||
:fill="isSegmentActive('dp') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('dp') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
:style="{ opacity: isSegmentActive('g') ? 1 : 0.15 }" class="segment" />
|
||||
<!-- dp段 (小数点) -->
|
||||
<circle cx="108" cy="154" r="6" :fill="isSegmentActive('dp') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('dp') ? 1 : 0.15 }" class="segment" />
|
||||
</svg>
|
||||
|
||||
<!-- 引脚 -->
|
||||
<div v-for="pin in pins" :key="pin.pinId"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${pin.x * props.size}px`,
|
||||
top: `${pin.y * props.size}px`,
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}"
|
||||
:data-pin-wrapper="`${pin.pinId}`"
|
||||
:data-pin-x="`${pin.x * props.size}`"
|
||||
:data-pin-y="`${pin.y * props.size}`">
|
||||
<Pin
|
||||
:ref="el => { if(el) pinRefs[pin.pinId] = el }"
|
||||
:label="pin.pinId"
|
||||
:constraint="pin.constraint"
|
||||
:pinId="pin.pinId"
|
||||
@pin-click="$emit('pin-click', $event)"
|
||||
/>
|
||||
<div v-for="pin in pins" :key="pin.pinId" :style="{
|
||||
position: 'absolute',
|
||||
left: `${pin.x * props.size}px`,
|
||||
top: `${pin.y * props.size}px`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}" :data-pin-wrapper="`${pin.pinId}`" :data-pin-x="`${pin.x * props.size}`"
|
||||
:data-pin-y="`${pin.y * props.size}`">
|
||||
<Pin :ref="(el) => {
|
||||
if (el) pinRefs[pin.pinId] = el;
|
||||
}
|
||||
" :label="pin.pinId" :constraint="pin.constraint" :pinId="pin.pinId" @pin-click="$emit('pin-click', $event)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
|
||||
import { getConstraintState, onConstraintStateChange } from '../../stores/constraints';
|
||||
import Pin from './Pin.vue';
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from "vue";
|
||||
import { useConstraintsStore } from "../../stores/constraints";
|
||||
import Pin from "./Pin.vue";
|
||||
|
||||
const { getConstraintState, onConstraintStateChange } = useConstraintsStore();
|
||||
|
||||
// 存储Pin引用
|
||||
const pinRefs = ref<Record<string, any>>({});
|
||||
|
|
@ -115,41 +84,41 @@ interface SevenSegmentDisplayProps {
|
|||
x: number;
|
||||
y: number;
|
||||
}[];
|
||||
cathodeType?: 'common' | 'anode'; // 共阴极或共阳极
|
||||
cathodeType?: "common" | "anode"; // 共阴极或共阳极
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<SevenSegmentDisplayProps>(), {
|
||||
size: 1,
|
||||
color: 'red',
|
||||
cathodeType: 'common', // 默认为共阴极
|
||||
color: "red",
|
||||
cathodeType: "common", // 默认为共阴极
|
||||
pins: () => [
|
||||
{ pinId: 'a', constraint: '', x: 10 , y: 170 }, // a段
|
||||
{ pinId: 'b', constraint: '', x: 25-1 , y: 170 }, // b段
|
||||
{ pinId: 'c', constraint: '', x: 40-2 , y: 170 }, // c段
|
||||
{ pinId: 'd', constraint: '', x: 55-3 , y: 170 }, // d段
|
||||
{ pinId: 'e', constraint: '', x: 70-4 , y: 170 }, // e段
|
||||
{ pinId: 'f', constraint: '', x: 85-5 , y: 170 }, // f段
|
||||
{ pinId: 'g', constraint: '', x: 100-6, y: 170 }, // g段
|
||||
{ pinId: 'dp', constraint: '', x: 115-7, y: 170 }, // 小数点
|
||||
{ pinId: 'COM', constraint: '', x: 60 , y: 10 } // 公共端，稍微低一点
|
||||
]
|
||||
{ pinId: "a", constraint: "", x: 10, y: 170 }, // a段
|
||||
{ pinId: "b", constraint: "", x: 25 - 1, y: 170 }, // b段
|
||||
{ pinId: "c", constraint: "", x: 40 - 2, y: 170 }, // c段
|
||||
{ pinId: "d", constraint: "", x: 55 - 3, y: 170 }, // d段
|
||||
{ pinId: "e", constraint: "", x: 70 - 4, y: 170 }, // e段
|
||||
{ pinId: "f", constraint: "", x: 85 - 5, y: 170 }, // f段
|
||||
{ pinId: "g", constraint: "", x: 100 - 6, y: 170 }, // g段
|
||||
{ pinId: "dp", constraint: "", x: 115 - 7, y: 170 }, // 小数点
|
||||
{ pinId: "COM", constraint: "", x: 60, y: 10 }, // 公共端，稍微低一点
|
||||
],
|
||||
});
|
||||
|
||||
const width = computed(() => 120 * props.size);
|
||||
const height = computed(() => 220 * props.size);
|
||||
|
||||
// 计算段颜色和非激活状态颜色
|
||||
const segmentColor = computed(() => props.color || 'red');
|
||||
const inactiveColor = computed(() => '#FFFFFF');
|
||||
const segmentColor = computed(() => props.color || "red");
|
||||
const inactiveColor = computed(() => "#FFFFFF");
|
||||
|
||||
// 监听props变化
|
||||
watch(
|
||||
() => props,
|
||||
(newProps) => {
|
||||
console.log('SevenSegmentDisplay props changed:', newProps);
|
||||
console.log("SevenSegmentDisplay props changed:", newProps);
|
||||
updateSegmentStates();
|
||||
},
|
||||
{ deep: true }
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 段引脚状态
|
||||
|
|
@ -165,29 +134,34 @@ const segmentStates = ref({
|
|||
});
|
||||
|
||||
// 判断段是否激活
|
||||
function isSegmentActive(segment: 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'dp'): boolean {
|
||||
function isSegmentActive(
|
||||
segment: "a" | "b" | "c" | "d" | "e" | "f" | "g" | "dp",
|
||||
): boolean {
|
||||
return segmentStates.value[segment];
|
||||
}
|
||||
|
||||
// 更新引脚状态的函数
|
||||
function updateSegmentStates() {
|
||||
for (const pin of props.pins) {
|
||||
if (['a', 'b', 'c', 'd', 'e', 'f', 'g', 'dp'].includes(pin.pinId)) {
|
||||
if (["a", "b", "c", "d", "e", "f", "g", "dp"].includes(pin.pinId)) {
|
||||
// 如果constraint为空，则默认为未激活状态
|
||||
if (!pin.constraint) {
|
||||
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = false;
|
||||
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
|
||||
false;
|
||||
continue;
|
||||
}
|
||||
|
||||
const pinState = getConstraintState(pin.constraint);
|
||||
|
||||
// 根据阴极/阳极类型反转逻辑
|
||||
if (props.cathodeType === 'common') {
|
||||
if (props.cathodeType === "common") {
|
||||
// 共阴极: 高电平激活段
|
||||
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = pinState === 'high';
|
||||
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
|
||||
pinState === "high";
|
||||
} else {
|
||||
// 共阳极: 低电平激活段
|
||||
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = pinState === 'low';
|
||||
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
|
||||
pinState === "low";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -195,8 +169,11 @@ function updateSegmentStates() {
|
|||
|
||||
// 监听约束状态变化
|
||||
function onConstraintChange(constraint: string, level: string) {
|
||||
const affectedPin = props.pins.find(pin => pin.constraint === constraint);
|
||||
if (affectedPin && ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'dp'].includes(affectedPin.pinId)) {
|
||||
const affectedPin = props.pins.find((pin) => pin.constraint === constraint);
|
||||
if (
|
||||
affectedPin &&
|
||||
["a", "b", "c", "d", "e", "f", "g", "dp"].includes(affectedPin.pinId)
|
||||
) {
|
||||
updateSegmentStates();
|
||||
}
|
||||
}
|
||||
|
|
@ -213,7 +190,7 @@ onUnmounted(() => {
|
|||
|
||||
// 暴露属性和方法
|
||||
defineExpose({
|
||||
updateSegmentStates
|
||||
updateSegmentStates,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -224,7 +201,9 @@ defineExpose({
|
|||
}
|
||||
|
||||
.segment {
|
||||
transition: opacity 0.2s, fill 0.2s;
|
||||
transition:
|
||||
opacity 0.2s,
|
||||
fill 0.2s;
|
||||
}
|
||||
|
||||
/* 数码管发光效果 */
|
||||
|
|
@ -238,19 +217,19 @@ defineExpose({
|
|||
export function getDefaultProps() {
|
||||
return {
|
||||
size: 1,
|
||||
color: 'red',
|
||||
cathodeType: 'common',
|
||||
color: "red",
|
||||
cathodeType: "common",
|
||||
pins: [
|
||||
{ pinId: 'a', constraint: '', x: 10 , y: 170 },
|
||||
{ pinId: 'b', constraint: '', x: 25-1 , y: 170 },
|
||||
{ pinId: 'c', constraint: '', x: 40-2 , y: 170 },
|
||||
{ pinId: 'd', constraint: '', x: 55-3 , y: 170 },
|
||||
{ pinId: 'e', constraint: '', x: 70-4 , y: 170 },
|
||||
{ pinId: 'f', constraint: '', x: 85-5 , y: 170 },
|
||||
{ pinId: 'g', constraint: '', x: 100-6, y: 170 },
|
||||
{ pinId: 'dp', constraint: '', x: 115-7, y: 170 },
|
||||
{ pinId: 'COM', constraint: '', x: 60 , y: 10 }
|
||||
]
|
||||
{ pinId: "a", constraint: "", x: 10, y: 170 },
|
||||
{ pinId: "b", constraint: "", x: 25 - 1, y: 170 },
|
||||
{ pinId: "c", constraint: "", x: 40 - 2, y: 170 },
|
||||
{ pinId: "d", constraint: "", x: 55 - 3, y: 170 },
|
||||
{ pinId: "e", constraint: "", x: 70 - 4, y: 170 },
|
||||
{ pinId: "f", constraint: "", x: 85 - 5, y: 170 },
|
||||
{ pinId: "g", constraint: "", x: 100 - 6, y: 170 },
|
||||
{ pinId: "dp", constraint: "", x: 115 - 7, y: 170 },
|
||||
{ pinId: "COM", constraint: "", x: 60, y: 10 },
|
||||
],
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,18 @@
|
|||
<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"
|
||||
/>
|
||||
<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>
|
||||
<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';
|
||||
import { useConstraintsStore } from "@/stores/constraints";
|
||||
import { computed, defineEmits, watch, onMounted, onUnmounted } from "vue";
|
||||
|
||||
const { getConstraintColor, onConstraintStateChange } = useConstraintsStore();
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
|
|
@ -33,7 +23,7 @@ interface Props {
|
|||
strokeColor?: string;
|
||||
strokeWidth?: number;
|
||||
isActive?: boolean;
|
||||
routingMode?: 'auto' | 'orthogonal' | 'direct' | 'path';
|
||||
routingMode?: "auto" | "orthogonal" | "direct" | "path";
|
||||
// 针脚引用属性
|
||||
startComponentId?: string;
|
||||
startPinId?: string;
|
||||
|
|
@ -48,12 +38,12 @@ interface Props {
|
|||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
strokeColor: '#4a5568',
|
||||
strokeColor: "#4a5568",
|
||||
strokeWidth: 2,
|
||||
isActive: false,
|
||||
routingMode: 'orthogonal',
|
||||
routingMode: "orthogonal",
|
||||
showLabel: false,
|
||||
constraint: ''
|
||||
constraint: "",
|
||||
});
|
||||
|
||||
// 响应约束状态变化的颜色
|
||||
|
|
@ -64,37 +54,46 @@ const constraintColor = computed(() => {
|
|||
|
||||
// 计算实际使用的颜色：isActive优先，其次是constraint电平颜色，最后是默认色
|
||||
const computedStroke = computed(() => {
|
||||
if (props.isActive) return '#ff9800';
|
||||
if (props.isActive) return "#ff9800";
|
||||
return constraintColor.value || props.strokeColor;
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click', 'update:active', 'update:position']);
|
||||
const emit = defineEmits(["click", "update:active", "update:position"]);
|
||||
|
||||
function handleClick(event: MouseEvent) {
|
||||
emit('click', { id: props.id, event });
|
||||
emit("click", { id: props.id, event });
|
||||
}
|
||||
|
||||
// 计算标签位置 - 放在连线中间
|
||||
const labelPosition = computed(() => {
|
||||
return {
|
||||
x: (props.startX + props.endX) / 2,
|
||||
y: (props.startY + props.endY) / 2 - 5
|
||||
y: (props.startY + props.endY) / 2 - 5,
|
||||
};
|
||||
});
|
||||
|
||||
const pathData = computed(() => {
|
||||
// 如果有路径命令，使用路径布线模式
|
||||
if (props.routingMode === 'path' && props.pathCommands && props.pathCommands.length > 0) {
|
||||
if (
|
||||
props.routingMode === "path" &&
|
||||
props.pathCommands &&
|
||||
props.pathCommands.length > 0
|
||||
) {
|
||||
return calculatePathFromCommands(
|
||||
props.startX,
|
||||
props.startY,
|
||||
props.endX,
|
||||
props.endY,
|
||||
props.pathCommands
|
||||
props.pathCommands,
|
||||
);
|
||||
}
|
||||
// 否则使用正交路径
|
||||
return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY);
|
||||
return calculateOrthogonalPath(
|
||||
props.startX,
|
||||
props.startY,
|
||||
props.endX,
|
||||
props.endY,
|
||||
);
|
||||
});
|
||||
|
||||
function calculatePathFromCommands(
|
||||
|
|
@ -102,10 +101,10 @@ function calculatePathFromCommands(
|
|||
startY: number,
|
||||
endX: number,
|
||||
endY: number,
|
||||
commands: string[]
|
||||
commands: string[],
|
||||
) {
|
||||
// 找到分隔符索引，通常是 "*"
|
||||
const splitterIndex = commands.indexOf('*');
|
||||
const splitterIndex = commands.indexOf("*");
|
||||
if (splitterIndex === -1) {
|
||||
// 如果没有分隔符，回退到正交路径
|
||||
return calculateOrthogonalPath(startX, startY, endX, endY);
|
||||
|
|
@ -129,7 +128,7 @@ function calculatePathFromCommands(
|
|||
currentY = newY;
|
||||
pathPoints.push([currentX, currentY]);
|
||||
}
|
||||
// 从终点开始反向处理
|
||||
// 从终点开始反向处理
|
||||
let endCurrentX = endX;
|
||||
let endCurrentY = endY;
|
||||
|
||||
|
|
@ -143,15 +142,18 @@ function calculatePathFromCommands(
|
|||
endCurrentX = newX;
|
||||
endCurrentY = newY;
|
||||
endPathPoints.push([endCurrentX, endCurrentY]);
|
||||
} // 反转终点路径点，保留所有点
|
||||
} // 反转终点路径点，保留所有点
|
||||
const reversedEndPoints = [...endPathPoints].reverse();
|
||||
|
||||
// 将两部分路径连接起来
|
||||
// 如果终点路径的第一个点与起点路径的最后一个点相同，则去掉重复点
|
||||
let combinedPoints;
|
||||
if (pathPoints.length > 0 && reversedEndPoints.length > 0 &&
|
||||
pathPoints[pathPoints.length - 1][0] === reversedEndPoints[0][0] &&
|
||||
pathPoints[pathPoints.length - 1][1] === reversedEndPoints[0][1]) {
|
||||
if (
|
||||
pathPoints.length > 0 &&
|
||||
reversedEndPoints.length > 0 &&
|
||||
pathPoints[pathPoints.length - 1][0] === reversedEndPoints[0][0] &&
|
||||
pathPoints[pathPoints.length - 1][1] === reversedEndPoints[0][1]
|
||||
) {
|
||||
combinedPoints = [...pathPoints, ...reversedEndPoints.slice(1)];
|
||||
} else {
|
||||
combinedPoints = [...pathPoints, ...reversedEndPoints];
|
||||
|
|
@ -160,25 +162,33 @@ function calculatePathFromCommands(
|
|||
const allPoints = combinedPoints;
|
||||
// 检查是否需要添加中间连接点
|
||||
if (allPoints.length >= 2) {
|
||||
const startPathEndPoint = pathPoints.length > 0 ? pathPoints[pathPoints.length - 1] : null;
|
||||
const endPathStartPoint = reversedEndPoints.length > 0 ? reversedEndPoints[0] : null;
|
||||
const startPathEndPoint =
|
||||
pathPoints.length > 0 ? pathPoints[pathPoints.length - 1] : null;
|
||||
const endPathStartPoint =
|
||||
reversedEndPoints.length > 0 ? reversedEndPoints[0] : null;
|
||||
|
||||
// 只有当起点路径和终点路径不相连时才添加连接线
|
||||
if (startPathEndPoint && endPathStartPoint &&
|
||||
(startPathEndPoint[0] !== endPathStartPoint[0] || startPathEndPoint[1] !== endPathStartPoint[1])) {
|
||||
if (
|
||||
startPathEndPoint &&
|
||||
endPathStartPoint &&
|
||||
(startPathEndPoint[0] !== endPathStartPoint[0] ||
|
||||
startPathEndPoint[1] !== endPathStartPoint[1])
|
||||
) {
|
||||
// 使用正交连接或直接连接
|
||||
let middlePoints: [number, number][] = [];
|
||||
|
||||
// 正交连接，添加额外点以确保路径是正交的
|
||||
middlePoints = generateOrthogonalConnection(
|
||||
startPathEndPoint[0], startPathEndPoint[1],
|
||||
endPathStartPoint[0], endPathStartPoint[1]
|
||||
startPathEndPoint[0],
|
||||
startPathEndPoint[1],
|
||||
endPathStartPoint[0],
|
||||
endPathStartPoint[1],
|
||||
);
|
||||
|
||||
// 在起点路径和终点路径之间插入中间点
|
||||
allPoints.splice(pathPoints.length, 0, ...middlePoints);
|
||||
}
|
||||
} // 生成SVG路径
|
||||
} // 生成SVG路径
|
||||
if (allPoints.length < 2) {
|
||||
// 如果没有足够的点，直接从起点到终点画一条线
|
||||
return `M ${startX} ${startY} L ${endX} ${endY}`;
|
||||
|
|
@ -194,25 +204,29 @@ function calculatePathFromCommands(
|
|||
}
|
||||
|
||||
// 执行单个路径命令
|
||||
function executePathCommand(x: number, y: number, command: string): { newX: number; newY: number } {
|
||||
function executePathCommand(
|
||||
x: number,
|
||||
y: number,
|
||||
command: string,
|
||||
): { newX: number; newY: number } {
|
||||
// 解析命令，例如 "down10", "right20", "downright5" 等
|
||||
let newX = x;
|
||||
let newY = y;
|
||||
|
||||
if (command.startsWith('right')) {
|
||||
if (command.startsWith("right")) {
|
||||
const distance = parseInt(command.substring(5), 10) || 10;
|
||||
newX = x + distance;
|
||||
newY = y;
|
||||
} else if (command.startsWith('left')) {
|
||||
} else if (command.startsWith("left")) {
|
||||
const distance = parseInt(command.substring(4), 10) || 10;
|
||||
newX = x - distance;
|
||||
newY = y;
|
||||
} else if (command.startsWith('down')) {
|
||||
if (command.startsWith('downright')) {
|
||||
} else if (command.startsWith("down")) {
|
||||
if (command.startsWith("downright")) {
|
||||
const distance = parseInt(command.substring(9), 10) || 10;
|
||||
newX = x + distance;
|
||||
newY = y + distance;
|
||||
} else if (command.startsWith('downleft')) {
|
||||
} else if (command.startsWith("downleft")) {
|
||||
const distance = parseInt(command.substring(8), 10) || 10;
|
||||
newX = x - distance;
|
||||
newY = y + distance;
|
||||
|
|
@ -221,12 +235,12 @@ function executePathCommand(x: number, y: number, command: string): { newX: numb
|
|||
newX = x;
|
||||
newY = y + distance;
|
||||
}
|
||||
} else if (command.startsWith('up')) {
|
||||
if (command.startsWith('upright')) {
|
||||
} else if (command.startsWith("up")) {
|
||||
if (command.startsWith("upright")) {
|
||||
const distance = parseInt(command.substring(7), 10) || 10;
|
||||
newX = x + distance;
|
||||
newY = y - distance;
|
||||
} else if (command.startsWith('upleft')) {
|
||||
} else if (command.startsWith("upleft")) {
|
||||
const distance = parseInt(command.substring(6), 10) || 10;
|
||||
newX = x - distance;
|
||||
newY = y - distance;
|
||||
|
|
@ -241,7 +255,12 @@ function executePathCommand(x: number, y: number, command: string): { newX: numb
|
|||
}
|
||||
|
||||
// 生成两点之间的正交连接点
|
||||
function generateOrthogonalConnection(x1: number, y1: number, x2: number, y2: number): [number, number][] {
|
||||
function generateOrthogonalConnection(
|
||||
x1: number,
|
||||
y1: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
): [number, number][] {
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
|
||||
|
|
@ -267,7 +286,12 @@ function generateOrthogonalConnection(x1: number, y1: number, x2: number, y2: nu
|
|||
}
|
||||
|
||||
// 计算正交路径
|
||||
function calculateOrthogonalPath(startX: number, startY: number, endX: number, endY: number) {
|
||||
function calculateOrthogonalPath(
|
||||
startX: number,
|
||||
startY: number,
|
||||
endX: number,
|
||||
endY: number,
|
||||
) {
|
||||
// 计算两点之间的水平和垂直距离
|
||||
const dx = endX - startX;
|
||||
const dy = endY - startY;
|
||||
|
|
@ -298,32 +322,26 @@ function reversePathCommand(command: string): string {
|
|||
|
||||
// 根据命令类型返回反向命令
|
||||
// 水平方向反转
|
||||
if (command.startsWith('right')) {
|
||||
if (command.startsWith("right")) {
|
||||
return `left${distance}`;
|
||||
}
|
||||
else if (command.startsWith('left')) {
|
||||
} else if (command.startsWith("left")) {
|
||||
return `right${distance}`;
|
||||
}
|
||||
// 垂直和斜向反转
|
||||
else if (command.startsWith('down')) {
|
||||
if (command.startsWith('downright')) {
|
||||
else if (command.startsWith("down")) {
|
||||
if (command.startsWith("downright")) {
|
||||
return `upleft${distance}`;
|
||||
}
|
||||
else if (command.startsWith('downleft')) {
|
||||
} else if (command.startsWith("downleft")) {
|
||||
return `upright${distance}`;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return `up${distance}`;
|
||||
}
|
||||
}
|
||||
else if (command.startsWith('up')) {
|
||||
if (command.startsWith('upright')) {
|
||||
} else if (command.startsWith("up")) {
|
||||
if (command.startsWith("upright")) {
|
||||
return `downleft${distance}`;
|
||||
}
|
||||
else if (command.startsWith('upleft')) {
|
||||
} else if (command.startsWith("upleft")) {
|
||||
return `downright${distance}`;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return `down${distance}`;
|
||||
}
|
||||
}
|
||||
|
|
@ -354,39 +372,49 @@ onUnmounted(() => {
|
|||
});
|
||||
|
||||
// 监听约束属性变化
|
||||
watch(() => props.constraint, (newConstraint, oldConstraint) => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
unsubscribe = null;
|
||||
}
|
||||
watch(
|
||||
() => props.constraint,
|
||||
(newConstraint, oldConstraint) => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
unsubscribe = null;
|
||||
}
|
||||
|
||||
if (newConstraint) {
|
||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
||||
if (constraint === newConstraint) {
|
||||
// 约束状态变化，触发重新渲染
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
if (newConstraint) {
|
||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
||||
if (constraint === newConstraint) {
|
||||
// 约束状态变化，触发重新渲染
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 暴露方法，用于获取这条连线的信息
|
||||
defineExpose({ id: props.id, getInfo: () => ({
|
||||
defineExpose({
|
||||
id: props.id,
|
||||
getInfo: () => ({
|
||||
id: props.id,
|
||||
startComponentId: props.startComponentId,
|
||||
startPinId: props.startPinId,
|
||||
endComponentId: props.endComponentId,
|
||||
endPinId: props.endPinId,
|
||||
constraint: props.constraint
|
||||
constraint: props.constraint,
|
||||
}),
|
||||
// 更新连线位置
|
||||
updatePosition: (newStartX: number, newStartY: number, newEndX: number, newEndY: number) => {
|
||||
updatePosition: (
|
||||
newStartX: number,
|
||||
newStartY: number,
|
||||
newEndX: number,
|
||||
newEndY: number,
|
||||
) => {
|
||||
// 由于 props 是只读的，我们只能通过事件通知父组件更新
|
||||
emit('update:position', {
|
||||
emit("update:position", {
|
||||
id: props.id,
|
||||
startX: newStartX,
|
||||
startY: newStartY,
|
||||
endX: newEndX,
|
||||
endY: newEndY
|
||||
endY: newEndY,
|
||||
});
|
||||
},
|
||||
// 获取连线的针脚情况
|
||||
|
|
@ -395,8 +423,8 @@ defineExpose({ id: props.id, getInfo: () => ({
|
|||
getRoutingMode: () => props.routingMode,
|
||||
// 设置连线状态（如高亮等）
|
||||
setActive: (active: boolean) => {
|
||||
emit('update:active', active);
|
||||
}
|
||||
emit("update:active", active);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,81 +1,103 @@
|
|||
import { ref, reactive } from 'vue';
|
||||
import { ref, computed, reactive } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { isBoolean } from 'lodash';
|
||||
|
||||
// 约束电平状态类型
|
||||
export type ConstraintLevel = 'high' | 'low' | 'undefined';
|
||||
|
||||
// 约束状态存储
|
||||
const constraintStates = reactive<Record<string, ConstraintLevel>>({});
|
||||
export const useConstraintsStore = defineStore('constraints', () => {
|
||||
|
||||
// 约束颜色映射
|
||||
export const constraintColors = {
|
||||
high: '#ff3333', // 高电平为红色
|
||||
low: '#3333ff', // 低电平为蓝色
|
||||
undefined: '#999999' // 未定义为灰色
|
||||
};
|
||||
// 约束状态存储
|
||||
const constraintStates = reactive<Record<string, ConstraintLevel>>({});
|
||||
|
||||
// 获取约束状态
|
||||
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);
|
||||
}
|
||||
// 约束颜色映射
|
||||
const constraintColors = {
|
||||
high: '#ff3333', // 高电平为红色
|
||||
low: '#3333ff', // 低电平为蓝色
|
||||
undefined: '#999999' // 未定义为灰色
|
||||
};
|
||||
}
|
||||
|
||||
// 触发约束变化
|
||||
export function notifyConstraintChange(constraint: string, level: ConstraintLevel) {
|
||||
setConstraintState(constraint, level);
|
||||
stateChangeCallbacks.forEach(callback => callback(constraint, level));
|
||||
}
|
||||
// 获取约束状态
|
||||
function getConstraintState(constraint: string): ConstraintLevel {
|
||||
if (!constraint) return 'undefined';
|
||||
return constraintStates[constraint] || 'undefined';
|
||||
}
|
||||
|
||||
// 设置约束状态
|
||||
function setConstraintState(constraint: string, level: ConstraintLevel) {
|
||||
if (!constraint) return;
|
||||
constraintStates[constraint] = level;
|
||||
}
|
||||
|
||||
// 批量设置约束状态
|
||||
function batchSetConstraintStates(states: Record<string, ConstraintLevel> | Record<string, boolean>) {
|
||||
// 收集发生变化的约束
|
||||
const changedConstraints: [string, ConstraintLevel][] = [];
|
||||
|
||||
// 更新状态并收集变化
|
||||
Object.entries(states).forEach(([constraint, level]) => {
|
||||
if (isBoolean(level)) {
|
||||
level = level ? "high" : "low";
|
||||
}
|
||||
|
||||
if (constraintStates[constraint] !== level) {
|
||||
constraintStates[constraint] = level;
|
||||
changedConstraints.push([constraint, level]);
|
||||
}
|
||||
});
|
||||
|
||||
// 通知所有变化
|
||||
changedConstraints.forEach(([constraint, level]) => {
|
||||
stateChangeCallbacks.forEach(callback => callback(constraint, level));
|
||||
});
|
||||
}
|
||||
|
||||
// 获取约束对应的颜色
|
||||
function getConstraintColor(constraint: string): string {
|
||||
const state = getConstraintState(constraint);
|
||||
return constraintColors[state];
|
||||
}
|
||||
|
||||
// 清除所有约束状态
|
||||
function clearAllConstraintStates() {
|
||||
Object.keys(constraintStates).forEach(key => {
|
||||
delete constraintStates[key];
|
||||
});
|
||||
}
|
||||
|
||||
// 获取所有约束状态
|
||||
function getAllConstraintStates(): Record<string, ConstraintLevel> {
|
||||
return { ...constraintStates };
|
||||
}
|
||||
|
||||
// 注册约束状态变化回调
|
||||
const stateChangeCallbacks: ((constraint: string, level: ConstraintLevel) => void)[] = [];
|
||||
|
||||
function onConstraintStateChange(callback: (constraint: string, level: ConstraintLevel) => void) {
|
||||
stateChangeCallbacks.push(callback);
|
||||
return () => {
|
||||
const index = stateChangeCallbacks.indexOf(callback);
|
||||
if (index > -1) {
|
||||
stateChangeCallbacks.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 触发约束变化
|
||||
function notifyConstraintChange(constraint: string, level: ConstraintLevel) {
|
||||
setConstraintState(constraint, level);
|
||||
stateChangeCallbacks.forEach(callback => callback(constraint, level));
|
||||
}
|
||||
|
||||
return {
|
||||
getConstraintState,
|
||||
setConstraintState,
|
||||
batchSetConstraintStates,
|
||||
getConstraintColor,
|
||||
clearAllConstraintStates,
|
||||
getAllConstraintStates,
|
||||
onConstraintStateChange,
|
||||
notifyConstraintChange,
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { isNull, isUndefined } from "lodash";
|
||||
import { ref } from "vue";
|
||||
import { RemoteUpdaterClient } from "@/APIClient";
|
||||
import { RemoteUpdateClient } from "@/APIClient";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { Common } from "@/Common";
|
||||
|
||||
|
|
@ -134,7 +134,7 @@ const appBitstream3File = ref<File>();
|
|||
// 远程升级相关参数
|
||||
const devAddr = ref("192.168.1.100");
|
||||
const devPort = 1234;
|
||||
const remoteUpdater = new RemoteUpdaterClient();
|
||||
const remoteUpdater = new RemoteUpdateClient();
|
||||
|
||||
// 处理文件上传
|
||||
function handleFileChange(event: Event, bistreamNum: number) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue