Merge branch 'csharp'
This commit is contained in:
@@ -5,10 +5,13 @@
|
||||
<input id="component-drawer" type="checkbox" class="drawer-toggle" v-model="showComponentsMenu" />
|
||||
<div class="drawer-side">
|
||||
<label for="component-drawer" aria-label="close sidebar" class="drawer-overlay !bg-opacity-50"></label>
|
||||
<div class="menu p-0 w-[460px] min-h-full bg-base-100 shadow-xl flex flex-col"> <!-- 菜单头部 -->
|
||||
<div class="menu p-0 w-[460px] min-h-full bg-base-100 shadow-xl flex flex-col">
|
||||
<!-- 菜单头部 -->
|
||||
<div class="p-6 border-b border-base-300 flex justify-between items-center">
|
||||
<h3 class="text-xl font-bold text-primary flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="text-primary">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="M12 8v8"></path>
|
||||
<path d="M8 12h8"></path>
|
||||
@@ -16,55 +19,53 @@
|
||||
添加元器件
|
||||
</h3>
|
||||
<label for="component-drawer" class="btn btn-ghost btn-sm btn-circle" @click="closeMenu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="tabs tabs-boxed bg-base-200 mx-6 mt-4 rounded-box">
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'components' }" @click="activeTab = 'components'">元器件</a>
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'components' }"
|
||||
@click="activeTab = 'components'">元器件</a>
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'templates' }" @click="activeTab = 'templates'">模板</a>
|
||||
<a class="tab" :class="{ 'tab-active': activeTab === 'virtual' }" @click="activeTab = 'virtual'">虚拟外设</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="px-6 py-4 border-b border-base-300">
|
||||
<div class="join w-full">
|
||||
<div class="join-item flex-1 relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索..."
|
||||
class="input input-bordered input-sm w-full pl-10"
|
||||
v-model="searchQuery"
|
||||
@keyup.enter="searchComponents"
|
||||
/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content opacity-60">
|
||||
<input type="text" placeholder="搜索..." class="input input-bordered input-sm w-full pl-10"
|
||||
v-model="searchQuery" @keyup.enter="searchComponents" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content opacity-60">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<button class="btn btn-sm join-item" @click="searchComponents">搜索</button>
|
||||
<button class="btn btn-sm join-item" @click="searchComponents">
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 元器件列表 (组件选项卡) -->
|
||||
<div v-if="activeTab === 'components'" class="px-6 py-4 overflow-auto flex-1">
|
||||
<div v-if="filteredComponents.length > 0" class="grid grid-cols-2 gap-4">
|
||||
<div v-for="(component, index) in filteredComponents" :key="index"
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addComponent(component)">
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addComponent(component)">
|
||||
<div class="card-body p-3 items-center text-center">
|
||||
<div class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<div
|
||||
class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<!-- 直接使用组件作为预览 -->
|
||||
<component
|
||||
v-if="componentModules[component.type]"
|
||||
:is="componentModules[component.type].default"
|
||||
class="component-preview"
|
||||
:size="getPreviewSize(component.type)"
|
||||
/>
|
||||
<component v-if="componentModules[component.type]" :is="componentModules[component.type].default"
|
||||
class="component-preview" :size="getPreviewSize(component.type)" />
|
||||
<!-- 加载中状态 -->
|
||||
<span v-else class="text-xs text-gray-400">加载中...</span>
|
||||
</div>
|
||||
@@ -75,7 +76,9 @@
|
||||
</div>
|
||||
<!-- 无搜索结果 -->
|
||||
<div v-else class="py-16 text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto text-base-300 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mx-auto text-base-300 mb-3">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
@@ -86,25 +89,31 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 模板列表 (模板选项卡) -->
|
||||
<div v-if="activeTab === 'templates'" class="px-6 py-4 overflow-auto flex-1">
|
||||
<div v-if="filteredTemplates.length > 0" class="grid grid-cols-2 gap-4">
|
||||
<div v-for="(template, index) in filteredTemplates" :key="index"
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addTemplate(template)">
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addTemplate(template)">
|
||||
<div class="card-body p-3 items-center text-center">
|
||||
<div class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<img :src="template.thumbnailUrl || '/placeholder-template.png'" alt="Template thumbnail" class="max-h-full max-w-full object-contain" />
|
||||
<div
|
||||
class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<img :src="template.thumbnailUrl || '/placeholder-template.png'
|
||||
" alt="Template thumbnail" class="max-h-full max-w-full object-contain" />
|
||||
</div>
|
||||
<h3 class="card-title text-sm mt-2">{{ template.name }}</h3>
|
||||
<p class="text-xs opacity-70">{{ template.description || '模板' }}</p>
|
||||
<p class="text-xs opacity-70">
|
||||
{{ template.description || "模板" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 无搜索结果 -->
|
||||
<div v-else class="py-16 text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto text-base-300 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mx-auto text-base-300 mb-3">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
@@ -115,21 +124,18 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 虚拟外设列表 (虚拟外设选项卡) -->
|
||||
<!-- 虚拟外设列表 (虚拟外设选项卡) -->
|
||||
<div v-if="activeTab === 'virtual'" class="px-6 py-4 overflow-auto flex-1">
|
||||
<div v-if="filteredVirtualDevices.length > 0" class="grid grid-cols-2 gap-4">
|
||||
<div v-for="(device, index) in filteredVirtualDevices" :key="index"
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addComponent(device)">
|
||||
class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
|
||||
@click="addComponent(device)">
|
||||
<div class="card-body p-3 items-center text-center">
|
||||
<div class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<div
|
||||
class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
|
||||
<!-- 直接使用组件作为预览 -->
|
||||
<component
|
||||
v-if="componentModules[device.type]"
|
||||
:is="componentModules[device.type].default"
|
||||
class="component-preview"
|
||||
:size="getPreviewSize(device.type)"
|
||||
/>
|
||||
<component v-if="componentModules[device.type]" :is="componentModules[device.type].default"
|
||||
class="component-preview" :size="getPreviewSize(device.type)" />
|
||||
<!-- 加载中状态 -->
|
||||
<span v-else class="text-xs text-gray-400">加载中...</span>
|
||||
</div>
|
||||
@@ -140,7 +146,9 @@
|
||||
</div>
|
||||
<!-- 无搜索结果 -->
|
||||
<div v-else class="py-16 text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto text-base-300 mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mx-auto text-base-300 mb-3">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
@@ -151,11 +159,12 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<div class="p-4 border-t border-base-300 bg-base-200 flex justify-between">
|
||||
<label for="component-drawer" class="btn btn-sm btn-ghost" @click="closeMenu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
返回
|
||||
@@ -171,7 +180,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, shallowRef, onMounted } from 'vue';
|
||||
import { ref, computed, shallowRef, onMounted } from "vue";
|
||||
import motherboardSvg from "../components/equipments/svg/motherboard.svg";
|
||||
|
||||
// Props 定义
|
||||
interface Props {
|
||||
@@ -181,51 +191,54 @@ interface Props {
|
||||
const props = defineProps<Props>();
|
||||
|
||||
// 定义组件发出的事件
|
||||
const emit = defineEmits(['close', 'add-component', 'add-template', 'update:open']);
|
||||
const emit = defineEmits([
|
||||
"close",
|
||||
"add-component",
|
||||
"add-template",
|
||||
"update:open",
|
||||
]);
|
||||
|
||||
// 当前激活的选项卡
|
||||
const activeTab = ref('components');
|
||||
const activeTab = ref("components");
|
||||
|
||||
// --- 搜索功能 ---
|
||||
const searchQuery = ref('');
|
||||
const searchQuery = ref("");
|
||||
|
||||
// --- 可用元器件列表 ---
|
||||
const availableComponents = [
|
||||
{ type: 'MechanicalButton', name: '机械按钮' },
|
||||
{ type: 'Switch', name: '开关' },
|
||||
{ type: 'Pin', name: '引脚' },
|
||||
{ type: 'SMT_LED', name: '贴片LED' },
|
||||
{ type: 'SevenSegmentDisplay', name: '数码管' },
|
||||
{ type: 'HDMI', name: 'HDMI接口' },
|
||||
{ type: 'DDR', name: 'DDR内存' },
|
||||
{ type: 'ETH', name: '以太网接口' },
|
||||
{ type: 'SD', name: 'SD卡插槽' },
|
||||
{ type: 'SFP', name: 'SFP光纤模块' },
|
||||
{ type: 'SMA', name: 'SMA连接器' },
|
||||
{ type: 'MotherBoard', name: '主板' },
|
||||
{ type: 'PG2L100H_FBG676', name: 'PG2L100H FBG676芯片' }
|
||||
{ type: "MechanicalButton", name: "机械按钮" },
|
||||
{ type: "Switch", name: "开关" },
|
||||
{ type: "Pin", name: "引脚" },
|
||||
{ type: "SMT_LED", name: "贴片LED" },
|
||||
{ type: "SevenSegmentDisplay", name: "数码管" },
|
||||
{ type: "HDMI", name: "HDMI接口" },
|
||||
{ type: "DDR", name: "DDR内存" },
|
||||
{ type: "ETH", name: "以太网接口" },
|
||||
{ type: "SD", name: "SD卡插槽" },
|
||||
{ type: "SFP", name: "SFP光纤模块" },
|
||||
{ type: "SMA", name: "SMA连接器" },
|
||||
{ type: "MotherBoard", name: "主板" },
|
||||
{ type: "PG2L100H_FBG676", name: "PG2L100H FBG676芯片" },
|
||||
];
|
||||
|
||||
// --- 可用虚拟外设列表 ---
|
||||
const availableVirtualDevices = [
|
||||
{ type: 'DDS', name: '信号发生器' }
|
||||
];
|
||||
const availableVirtualDevices = [{ type: "DDS", name: "信号发生器" }];
|
||||
|
||||
// --- 可用模板列表 ---
|
||||
const availableTemplates = ref([
|
||||
{
|
||||
name: 'PG2L100H 基础开发板',
|
||||
id: 'PG2L100H_Pango100pro',
|
||||
description: '包含主板和两个LED的基本设置',
|
||||
path: '/src/components/equipments/templates/PG2L100H_Pango100pro.json',
|
||||
thumbnailUrl: '/src/components/equipments/svg/motherboard.svg'
|
||||
}
|
||||
{
|
||||
name: "PG2L100H 基础开发板",
|
||||
id: "PG2L100H_Pango100pro",
|
||||
description: "包含主板和两个LED的基本设置",
|
||||
path: "/public/EquipmentTemplates/PG2L100H_Pango100pro.json",
|
||||
thumbnailUrl: motherboardSvg,
|
||||
},
|
||||
]);
|
||||
|
||||
// 显示/隐藏组件菜单
|
||||
const showComponentsMenu = computed({
|
||||
get: () => props.open,
|
||||
set: (value) => emit('update:open', value)
|
||||
set: (value) => emit("update:open", value),
|
||||
});
|
||||
|
||||
// 组件模块缓存
|
||||
@@ -237,13 +250,13 @@ async function loadComponentModule(type: string) {
|
||||
try {
|
||||
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
|
||||
const module = await import(`../components/equipments/${type}.vue`);
|
||||
|
||||
|
||||
// 将模块添加到缓存中
|
||||
componentModules.value = {
|
||||
...componentModules.value,
|
||||
[type]: module
|
||||
[type]: module,
|
||||
};
|
||||
|
||||
|
||||
console.log(`Loaded module for ${type}:`, module);
|
||||
} catch (error) {
|
||||
console.error(`Failed to load component module ${type}:`, error);
|
||||
@@ -263,7 +276,7 @@ async function preloadComponentModules() {
|
||||
console.error(`Failed to preload component ${component.type}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 加载虚拟外设组件
|
||||
for (const device of availableVirtualDevices) {
|
||||
try {
|
||||
@@ -278,21 +291,21 @@ async function preloadComponentModules() {
|
||||
function getPreviewSize(componentType: string): number {
|
||||
// 根据组件类型返回适当的预览尺寸
|
||||
const previewSizes: Record<string, number> = {
|
||||
'MechanicalButton': 0.4, // 按钮较大，需要更小尺寸
|
||||
'Switch': 0.35, // 开关较大，需要更小尺寸
|
||||
'Pin': 0.8, // 引脚较小，可以大一些
|
||||
'SMT_LED': 0.7, // LED可以保持适中
|
||||
'SevenSegmentDisplay': 0.4, // 数码管较大，需要较小尺寸
|
||||
'HDMI': 0.5, // HDMI接口较大
|
||||
'DDR': 0.5, // DDR内存较大
|
||||
'ETH': 0.5, // 以太网接口较大
|
||||
'SD': 0.6, // SD卡插槽适中
|
||||
'SFP': 0.4, // SFP光纤模块较大
|
||||
'SMA': 0.7, // SMA连接器可以适中
|
||||
'MotherBoard': 0.13, // 主板最大，需要最小尺寸
|
||||
'DDS': 0.3 // 信号发生器较大，需要较小尺寸
|
||||
MechanicalButton: 0.4, // 按钮较大，需要更小尺寸
|
||||
Switch: 0.35, // 开关较大，需要更小尺寸
|
||||
Pin: 0.8, // 引脚较小，可以大一些
|
||||
SMT_LED: 0.7, // LED可以保持适中
|
||||
SevenSegmentDisplay: 0.4, // 数码管较大，需要较小尺寸
|
||||
HDMI: 0.5, // HDMI接口较大
|
||||
DDR: 0.5, // DDR内存较大
|
||||
ETH: 0.5, // 以太网接口较大
|
||||
SD: 0.6, // SD卡插槽适中
|
||||
SFP: 0.4, // SFP光纤模块较大
|
||||
SMA: 0.7, // SMA连接器可以适中
|
||||
MotherBoard: 0.13, // 主板最大，需要最小尺寸
|
||||
DDS: 0.3, // 信号发生器较大，需要较小尺寸
|
||||
};
|
||||
|
||||
|
||||
// 返回对应尺寸，如果没有特定配置则返回默认值0.5
|
||||
return previewSizes[componentType] || 0.5;
|
||||
}
|
||||
@@ -306,7 +319,7 @@ function searchComponents() {
|
||||
// 关闭菜单
|
||||
function closeMenu() {
|
||||
showComponentsMenu.value = false;
|
||||
emit('close');
|
||||
emit("close");
|
||||
}
|
||||
|
||||
// 添加新元器件
|
||||
@@ -316,25 +329,28 @@ async function addComponent(componentTemplate: { type: string; name: string }) {
|
||||
let defaultProps: Record<string, any> = {};
|
||||
|
||||
// 尝试直接调用组件导出的getDefaultProps方法
|
||||
if(moduleRef){
|
||||
if (typeof moduleRef.getDefaultProps === 'function') {
|
||||
if (moduleRef) {
|
||||
if (typeof moduleRef.getDefaultProps === "function") {
|
||||
defaultProps = moduleRef.getDefaultProps();
|
||||
console.log(`Got default props from ${componentTemplate.type}:`, defaultProps);
|
||||
console.log(
|
||||
`Got default props from ${componentTemplate.type}:`,
|
||||
defaultProps,
|
||||
);
|
||||
} else {
|
||||
// 回退到配置文件
|
||||
console.log(`No getDefaultProps found for ${componentTemplate.type}`);
|
||||
}
|
||||
} else{
|
||||
} else {
|
||||
console.log(`Failed to load module for ${componentTemplate.type}`);
|
||||
}
|
||||
|
||||
// 发送添加组件事件给父组件
|
||||
emit('add-component', {
|
||||
emit("add-component", {
|
||||
type: componentTemplate.type,
|
||||
name: componentTemplate.name,
|
||||
props: defaultProps
|
||||
props: defaultProps,
|
||||
});
|
||||
|
||||
|
||||
// 关闭菜单
|
||||
closeMenu();
|
||||
}
|
||||
@@ -347,58 +363,62 @@ async function addTemplate(template: any) {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load template: ${response.statusText}`);
|
||||
}
|
||||
|
||||
|
||||
const templateData = await response.json();
|
||||
console.log('加载模板:', templateData);
|
||||
|
||||
console.log("加载模板:", templateData);
|
||||
|
||||
// 发出事件，将模板数据传递给父组件
|
||||
emit('add-template', {
|
||||
emit("add-template", {
|
||||
id: template.id,
|
||||
name: template.name,
|
||||
template: templateData
|
||||
template: templateData,
|
||||
});
|
||||
|
||||
|
||||
// 关闭菜单
|
||||
closeMenu();
|
||||
} catch (error) {
|
||||
console.error('加载模板出错:', error);
|
||||
alert('无法加载模板文件，请检查控制台错误信息');
|
||||
console.error("加载模板出错:", error);
|
||||
alert("无法加载模板文件，请检查控制台错误信息");
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤后的元器件列表 (用于菜单)
|
||||
const filteredComponents = computed(() => {
|
||||
if (!searchQuery.value || activeTab.value !== 'components') {
|
||||
if (!searchQuery.value || activeTab.value !== "components") {
|
||||
return availableComponents;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return availableComponents.filter(component =>
|
||||
component.name.toLowerCase().includes(query) ||
|
||||
component.type.toLowerCase().includes(query)
|
||||
return availableComponents.filter(
|
||||
(component) =>
|
||||
component.name.toLowerCase().includes(query) ||
|
||||
component.type.toLowerCase().includes(query),
|
||||
);
|
||||
});
|
||||
|
||||
// 过滤后的模板列表 (用于菜单)
|
||||
const filteredTemplates = computed(() => {
|
||||
if (!searchQuery.value || activeTab.value !== 'templates') {
|
||||
if (!searchQuery.value || activeTab.value !== "templates") {
|
||||
return availableTemplates.value;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return availableTemplates.value.filter(template =>
|
||||
template.name.toLowerCase().includes(query) ||
|
||||
(template.description && template.description.toLowerCase().includes(query))
|
||||
return availableTemplates.value.filter(
|
||||
(template) =>
|
||||
template.name.toLowerCase().includes(query) ||
|
||||
(template.description &&
|
||||
template.description.toLowerCase().includes(query)),
|
||||
);
|
||||
});
|
||||
|
||||
// 过滤后的虚拟外设列表 (用于菜单)
|
||||
const filteredVirtualDevices = computed(() => {
|
||||
if (!searchQuery.value || activeTab.value !== 'virtual') {
|
||||
if (!searchQuery.value || activeTab.value !== "virtual") {
|
||||
return availableVirtualDevices;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return availableVirtualDevices.filter(device =>
|
||||
device.name.toLowerCase().includes(query) ||
|
||||
device.type.toLowerCase().includes(query)
|
||||
return availableVirtualDevices.filter(
|
||||
(device) =>
|
||||
device.name.toLowerCase().includes(query) ||
|
||||
device.type.toLowerCase().includes(query),
|
||||
);
|
||||
});
|
||||
|
||||
@@ -427,6 +447,7 @@ onMounted(() => {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
4
src/components/InjectKeys.ts
Normal file
4
src/components/InjectKeys.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import type { InjectionKey, Ref } from "vue";
|
||||
|
||||
export const CanvasCurrentSelectedComponentID = Symbol() as InjectionKey<Ref<string | null>>
|
||||
|
||||
@@ -152,7 +152,7 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
// 控制折叠面板状态
|
||||
const generalPropsExpanded = ref(true);
|
||||
const generalPropsExpanded = ref(false);
|
||||
const componentPropsExpanded = ref(true);
|
||||
|
||||
// 更新组件属性方法
|
||||
|
||||
@@ -44,19 +44,13 @@
|
||||
</CollapsibleSection>
|
||||
|
||||
<CollapsibleSection title="组件功能" v-model:isExpanded="componentCapsExpanded" status="default" class="mt-4">
|
||||
<div v-if="componentData && componentData.type">
|
||||
<component
|
||||
v-if="capabilityComponent"
|
||||
:is="capabilityComponent"
|
||||
v-bind="componentData.attrs"
|
||||
/>
|
||||
<div v-else class="text-gray-400">
|
||||
该组件没有提供特殊功能
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-gray-400">
|
||||
<div id="ComponentCapabilities" ref="ComponentCapabilities"></div>
|
||||
<div v-if="!(componentData && componentData.type)" class="text-gray-400">
|
||||
选择元件以查看其功能
|
||||
</div>
|
||||
<div v-else-if="!componentCaps?.hasChildNodes()" class="text-gray-400">
|
||||
该组件没有提供特殊功能
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- 未来可以在这里添加更多的分区 -->
|
||||
@@ -79,9 +73,12 @@ import { type PropertyConfig } from "@/components/equipments/componentConfig"; /
|
||||
import CollapsibleSection from "./CollapsibleSection.vue"; // 可折叠区域组件
|
||||
import PropertyEditor from "./PropertyEditor.vue"; // 属性编辑器组件
|
||||
import DDSPropertyEditor from "./equipments/DDSPropertyEditor.vue"; // DDS专用属性编辑器组件
|
||||
import { ref, computed, watch, shallowRef, markRaw, h, createApp } from "vue"; // Vue核心API
|
||||
import { isNull, isUndefined } from "lodash";
|
||||
import type { JSX } from "vue/jsx-runtime";
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
useTemplateRef,
|
||||
} from "vue"; // Vue核心API
|
||||
|
||||
// 引脚接口定义
|
||||
interface Pin {
|
||||
@@ -98,11 +95,13 @@ const props = defineProps<{
|
||||
}>();
|
||||
|
||||
// 控制各个属性分区的展开状态
|
||||
const propertySectionExpanded = ref(true); // 基本属性区域默认展开
|
||||
const propertySectionExpanded = ref(false); // 基本属性区域默认展开
|
||||
const pinsSectionExpanded = ref(false); // 引脚配置区域默认折叠
|
||||
const componentCapsExpanded = ref(true); // 组件功能区域默认展开
|
||||
const wireSectionExpanded = ref(false); // 连线管理区域默认折叠
|
||||
|
||||
const componentCaps = useTemplateRef("ComponentCapabilities");
|
||||
|
||||
// DDS组件特殊属性的本地状态
|
||||
const ddsProperties = ref({
|
||||
frequency: 1000, // 频率，默认1000Hz
|
||||
@@ -215,116 +214,6 @@ function updateDDSProperties(newProperties: any) {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 存储当前选中组件的能力组件
|
||||
const capabilityComponent = shallowRef(null);
|
||||
|
||||
// 获取组件实例上暴露的方法
|
||||
async function getExposedCapabilities(componentType: string) {
|
||||
try {
|
||||
// 动态导入组件
|
||||
const module = await import(`./equipments/${componentType}.vue`);
|
||||
const Component = module.default;
|
||||
|
||||
// 创建一个临时div作为挂载点
|
||||
const tempDiv = document.createElement('div');
|
||||
|
||||
// 创建临时应用实例并挂载组件
|
||||
let exposedMethods: any = null;
|
||||
const app = createApp({
|
||||
render() {
|
||||
return h(Component, {
|
||||
ref: (el: any) => {
|
||||
if (el) {
|
||||
// 获取组件实例暴露的方法
|
||||
exposedMethods = el;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 挂载应用
|
||||
const vm = app.mount(tempDiv);
|
||||
|
||||
// 确保实例已创建并获取到暴露的方法
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
|
||||
// 检查是否有getCapabilities方法
|
||||
if (exposedMethods && typeof exposedMethods.getCapabilities === 'function') {
|
||||
// 获取能力组件定义
|
||||
const CapabilityComponent = exposedMethods.getCapabilities();
|
||||
|
||||
// 卸载应用，清理DOM
|
||||
app.unmount();
|
||||
tempDiv.remove();
|
||||
|
||||
return CapabilityComponent;
|
||||
}
|
||||
|
||||
// 卸载应用，清理DOM
|
||||
app.unmount();
|
||||
tempDiv.remove();
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error(`获取${componentType}能力页面失败:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 监听选中组件变化，动态加载能力组件
|
||||
watch(
|
||||
() => props.componentData,
|
||||
async (newComponentData) => {
|
||||
if (newComponentData && newComponentData.type) {
|
||||
try {
|
||||
// 首先尝试从实例中获取暴露的方法
|
||||
const capsComponent = await getExposedCapabilities(newComponentData.type);
|
||||
|
||||
if (capsComponent) {
|
||||
capabilityComponent.value = markRaw(capsComponent);
|
||||
console.log(`已从实例加载${newComponentData.type}组件的能力页面`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果实例方法获取失败，回退到模块导出方法
|
||||
const module = await import(`./equipments/${newComponentData.type}.vue`);
|
||||
|
||||
if (
|
||||
(module.default && typeof module.default.getCapabilities === "function") ||
|
||||
typeof module.getCapabilities === "function"
|
||||
) {
|
||||
const getCapsFn =
|
||||
typeof module.getCapabilities === "function"
|
||||
? module.getCapabilities
|
||||
: module.default.getCapabilities;
|
||||
|
||||
const moduleCapComponent = getCapsFn();
|
||||
if (moduleCapComponent) {
|
||||
capabilityComponent.value = markRaw(moduleCapComponent);
|
||||
console.log(`已从模块加载${newComponentData.type}组件的能力页面`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
capabilityComponent.value = null;
|
||||
console.log(`组件${newComponentData.type}没有提供getCapabilities方法`);
|
||||
} catch (error) {
|
||||
console.error(`加载组件${newComponentData.type}能力页面失败:`, error);
|
||||
capabilityComponent.value = null;
|
||||
}
|
||||
} else {
|
||||
capabilityComponent.value = null;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 修改hasComponentCaps计算属性
|
||||
const hasComponentCaps = computed(() => {
|
||||
return capabilityComponent.value !== null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -6,30 +6,34 @@
|
||||
<!-- Input File -->
|
||||
<fieldset class="fieldset w-full">
|
||||
<legend class="fieldset-legend text-sm">选择或拖拽上传文件</legend>
|
||||
<input type="file" class="file-input w-full" :value="fileInput" @change="handleFileChange" />
|
||||
<input type="file" ref="fileInput" class="file-input w-full" @change="handleFileChange" />
|
||||
<label class="fieldset-label">文件最大容量: {{ maxMemory }}MB</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Upload Button -->
|
||||
<div class="card-actions w-full">
|
||||
<button @click="handleClick" class="btn btn-primary grow">
|
||||
{{ buttonText }}
|
||||
<button @click="handleClick" class="btn btn-primary grow" :disabled="isUploading">
|
||||
<div v-if="isUploading">
|
||||
<span class="loading loading-spinner"></span>
|
||||
下载中...
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ buttonText }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { useEquipments } from "@/stores/equipments";
|
||||
import { computed, ref, useTemplateRef, onMounted } from "vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { isNull, isUndefined } from "lodash";
|
||||
|
||||
interface Props {
|
||||
uploadEvent?: Function;
|
||||
downloadEvent?: Function;
|
||||
uploadEvent?: (file: File) => Promise<boolean>;
|
||||
downloadEvent?: () => Promise<boolean>;
|
||||
maxMemory?: number;
|
||||
defaultFile?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@@ -41,16 +45,23 @@ const emits = defineEmits<{
|
||||
}>();
|
||||
|
||||
const dialog = useDialogStore();
|
||||
const eqps = useEquipments();
|
||||
|
||||
const isUploading = ref(false);
|
||||
const buttonText = computed(() => {
|
||||
return isUndefined(props.downloadEvent) ? "上传" : "上传并下载";
|
||||
});
|
||||
|
||||
// var bitstream: File | null = null;
|
||||
const bitstream = defineModel<File | undefined>();
|
||||
const fileInput = computed(() => {
|
||||
return !isUndefined(bitstream.value) ? bitstream.value.name : "";
|
||||
const fileInput = useTemplateRef("fileInput");
|
||||
const bitstream = defineModel("bitstreamFile", {
|
||||
type: File,
|
||||
default: undefined,
|
||||
});
|
||||
onMounted(() => {
|
||||
if (!isUndefined(bitstream.value) && !isNull(fileInput.value)) {
|
||||
let fileList = new DataTransfer();
|
||||
fileList.items.add(bitstream.value);
|
||||
fileInput.value.files = fileList.files;
|
||||
}
|
||||
});
|
||||
|
||||
function handleFileChange(event: Event): void {
|
||||
@@ -85,9 +96,9 @@ async function handleClick(event: Event): Promise<void> {
|
||||
return;
|
||||
}
|
||||
|
||||
// Upload - 修改这里，传递bitstream.value而不是bitstream
|
||||
isUploading.value = true;
|
||||
try {
|
||||
const ret = await props.uploadEvent(event, bitstream.value);
|
||||
const ret = await props.uploadEvent(bitstream.value);
|
||||
if (isUndefined(props.downloadEvent)) {
|
||||
if (ret) {
|
||||
dialog.info("上传成功");
|
||||
@@ -95,6 +106,10 @@ async function handleClick(event: Event): Promise<void> {
|
||||
} else dialog.error("上传失败");
|
||||
return;
|
||||
}
|
||||
if (!ret) {
|
||||
isUploading.value = false;
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
dialog.error("上传失败");
|
||||
console.error(e);
|
||||
@@ -110,8 +125,9 @@ async function handleClick(event: Event): Promise<void> {
|
||||
dialog.error("下载失败");
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
isUploading.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { JSX } from "vue/jsx-runtime";
|
||||
|
||||
// 定义 diagram.json 的类型结构
|
||||
export interface DiagramData {
|
||||
version: number;
|
||||
@@ -17,7 +15,6 @@ export interface DiagramPart {
|
||||
x: number;
|
||||
y: number;
|
||||
attrs: Record<string, any>;
|
||||
capsPage?: JSX.Element;
|
||||
rotate: number;
|
||||
group: string;
|
||||
positionlock: boolean;
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { ref, computed, watch, onMounted, watchEffect } from 'vue';
|
||||
import Pin from './Pin.vue';
|
||||
|
||||
// 存储Pin引用
|
||||
@@ -94,6 +94,10 @@ const currentWaveformIndex = ref(0);
|
||||
const waveformNames = ['正弦波', '方波', '三角波', '锯齿波'];
|
||||
const waveforms = ['sine', 'square', 'triangle', 'sawtooth'];
|
||||
|
||||
watchEffect(()=>{
|
||||
console.log(`DDS Porperties: ${frequency.value} ${timebase.value}`)
|
||||
})
|
||||
|
||||
// 波形函数集合
|
||||
interface WaveformFunction {
|
||||
(x: number, width: number, height: number, phaseRad: number): number;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
>
|
||||
<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">
|
||||
<!-- defs 和按钮底座保持不变 -->
|
||||
<defs>
|
||||
<filter id="btn-shadow">
|
||||
@@ -17,7 +16,7 @@
|
||||
<feMergeNode in="offsetBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</filter>
|
||||
<linearGradient id="normal" gradientTransform="rotate(45 0 0)">
|
||||
<stop stop-color="#4b4b4b" offset="0" />
|
||||
<stop stop-color="#171717" offset="1" />
|
||||
@@ -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,39 +140,39 @@ 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);
|
||||
}
|
||||
|
||||
// --- 按键状态逻辑 ---
|
||||
function toggleButtonState(isPressed: boolean) {
|
||||
isKeyPressed.value = isPressed;
|
||||
btnHeight.value = isPressed ? 180 : 200;
|
||||
|
||||
|
||||
// 发出事件通知父组件
|
||||
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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="motherboard-container" :style="{
|
||||
<div class="motherboard-container" v-bind="$attrs" :style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
position: 'relative',
|
||||
@@ -9,35 +9,41 @@
|
||||
<image href="../equipments/svg/motherboard.svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
|
||||
</svg>
|
||||
</div>
|
||||
<Teleport to="#ComponentCapabilities" v-if="selectecComponentID === props.componentId">
|
||||
<MotherBoardCaps :jtagAddr="props.boardAddr" :jtagPort="toNumber(props.boardPort)" :jtagFreq="jtagFreq"
|
||||
@change-jtag-freq="changeJtagFreq" />
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { JtagClient, type FileParameter } from "@/APIClient";
|
||||
import z from "zod";
|
||||
import { useEquipments } from "@/stores/equipments";
|
||||
import UploadCard from "@/components/UploadCard.vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { toNumber, toString } from "lodash";
|
||||
import { computed, ref, defineComponent, watch } from "vue";
|
||||
import MotherBoardCaps from "./MotherBoardCaps.vue";
|
||||
import { ref, computed, watchEffect, inject } from "vue";
|
||||
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
|
||||
import { toNumber } from "lodash";
|
||||
|
||||
// 主板特有属性
|
||||
interface MotherBoardProps {
|
||||
export interface MotherBoardProps {
|
||||
size?: number;
|
||||
jtagAddr?: string;
|
||||
jtagPort?: string;
|
||||
boardAddr?: string;
|
||||
boardPort?: string;
|
||||
componentId?: string;
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "pinClick", pinId: string): void;
|
||||
}>();
|
||||
|
||||
const props = withDefaults(defineProps<MotherBoardProps>(), getDefaultProps());
|
||||
const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));
|
||||
|
||||
const jtagFreq = ref("25 MHz");
|
||||
function changeJtagFreq(text: string) {
|
||||
jtagFreq.value = text;
|
||||
}
|
||||
|
||||
// 计算实际宽高
|
||||
const width = computed(() => 800 * props.size);
|
||||
const height = computed(() => 600 * props.size);
|
||||
const eqps = useEquipments();
|
||||
|
||||
watch([props.jtagAddr, props.jtagPort], () => {
|
||||
eqps.jtagIPAddr = props.jtagAddr;
|
||||
eqps.jtagPort = props.jtagPort;
|
||||
});
|
||||
|
||||
// 向外暴露方法
|
||||
defineExpose({
|
||||
@@ -47,144 +53,17 @@ defineExpose({
|
||||
}),
|
||||
// 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
|
||||
getPinPosition: () => null,
|
||||
getCapabilities: () => {
|
||||
// 返回组件定义而不是直接返回JSX
|
||||
return defineComponent({
|
||||
name: "MotherBoardCapabilities",
|
||||
props: {
|
||||
jtagAddr: {
|
||||
type: String,
|
||||
default: props.jtagAddr,
|
||||
},
|
||||
jtagPort: {
|
||||
type: String,
|
||||
default: props.jtagPort,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const jtagController = new JtagClient();
|
||||
const dialog = useDialogStore();
|
||||
|
||||
// 使用传入的属性或默认值
|
||||
const jtagIDCode = ref("");
|
||||
const boardAddress = computed(() => props.jtagAddr);
|
||||
const boardPort = computed(() => toNumber(props.jtagPort));
|
||||
|
||||
async function uploadBitstream(event: Event, bitstream: File) {
|
||||
if (!boardAddress.value || !boardPort.value) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return;
|
||||
}
|
||||
|
||||
const fileParam = {
|
||||
data: bitstream,
|
||||
fileName: bitstream.name,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await jtagController.uploadBitstream(
|
||||
boardAddress.value,
|
||||
fileParam,
|
||||
);
|
||||
return resp;
|
||||
} catch (e) {
|
||||
dialog.error("上传错误");
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadBitstream() {
|
||||
if (!boardAddress.value || !boardPort.value) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await jtagController.downloadBitstream(
|
||||
boardAddress.value,
|
||||
boardPort.value,
|
||||
);
|
||||
return resp;
|
||||
} catch (e) {
|
||||
dialog.error("上传错误");
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
watch([boardAddress, boardPort], () => {
|
||||
if (
|
||||
z.string().ip().safeParse(boardAddress).success &&
|
||||
z.number().positive().safeParse(boardPort).success
|
||||
)
|
||||
getIDCode();
|
||||
});
|
||||
|
||||
async function getIDCode() {
|
||||
if (!boardAddress.value || !boardPort.value) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await jtagController.getDeviceIDCode(
|
||||
boardAddress.value,
|
||||
boardPort.value,
|
||||
);
|
||||
jtagIDCode.value = toString(resp);
|
||||
} catch (e) {
|
||||
dialog.error("获取IDCode错误");
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
<h1 class="font-bold text-center text-2xl">Jtag</h1>
|
||||
<div class="flex">
|
||||
<p class="grow">IDCode: {jtagIDCode.value}</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"
|
||||
>
|
||||
<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>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<UploadCard
|
||||
class="bg-base-200"
|
||||
upload-event={uploadBitstream}
|
||||
download-event={downloadBitstream}
|
||||
defaultFile={eqps.jtagBitstream}
|
||||
onFinishedUpload={(file: File) => {
|
||||
eqps.jtagBitstream = file;
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
</UploadCard>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="tsx">
|
||||
// 添加一个静态方法来获取默认props
|
||||
export function getDefaultProps() {
|
||||
export function getDefaultProps(): MotherBoardProps {
|
||||
return {
|
||||
size: 1,
|
||||
jtagAddr: "127.0.0.1",
|
||||
jtagPort: "1234",
|
||||
boardAddr: "127.0.0.1",
|
||||
boardPort: "1234",
|
||||
componentId: "DefaultMotherBoardID",
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
124
src/components/equipments/MotherBoardCaps.vue
Normal file
124
src/components/equipments/MotherBoardCaps.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="font-bold text-center text-2xl">Jtag</h1>
|
||||
<div class="flex flex-col">
|
||||
<p class="grow">Jtag Addr: {{ eqps.boardAddr }}</p>
|
||||
<p class="grow">Jtag Port: {{ eqps.boardPort.toString() }}</p>
|
||||
<div class="flex justify-between grow">
|
||||
<p>
|
||||
IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0").toUpperCase() }}
|
||||
</p>
|
||||
<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>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<UploadCard class="bg-base-200" :upload-event="eqps.jtagUploadBitstream"
|
||||
:download-event="eqps.jtagDownloadBitstream" :bitstream-file="eqps.jtagBitstream"
|
||||
@update:bitstream-file="handleBitstreamChange">
|
||||
</UploadCard>
|
||||
<div class="divider"></div>
|
||||
<div class="w-full">
|
||||
<legend class="fieldset-legend text-sm mb-0.3">Jtag运行频率</legend>
|
||||
<select class="select w-full" @change="handleSelectJtagSpeed" :value="props.jtagFreq">
|
||||
<option v-for="option in selectJtagSpeedOptions" :value="option.id">
|
||||
{{ option.text }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-row items-center">
|
||||
<fieldset class="fieldset w-70">
|
||||
<legend class="fieldset-legend text-sm">边界扫描刷新率 / Hz</legend>
|
||||
<input type="number" class="input validator" required placeholder="Type a number between 1 to 1000" min="1"
|
||||
max="1000" v-model="jtagBoundaryScanFreq" title="Type a number between 1 to 1000" />
|
||||
<p class="validator-hint">输入一个1 ~ 1000的数</p>
|
||||
</fieldset>
|
||||
<button class="btn btn-primary grow mx-4" :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
|
||||
:onclick="toggleJtagBoundaryScan">
|
||||
{{ eqps.enableJtagBoundaryScan ? "关闭边界扫描" : "启动边界扫描" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import z from "zod";
|
||||
import UploadCard from "@/components/UploadCard.vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { useEquipments } from "@/stores/equipments";
|
||||
import { computed, ref, watchEffect } from "vue";
|
||||
|
||||
interface CapsProps {
|
||||
jtagAddr?: string;
|
||||
jtagPort?: number;
|
||||
jtagFreq?: string;
|
||||
}
|
||||
|
||||
const emits = defineEmits<{
|
||||
changeJtagFreq: [text: string];
|
||||
}>();
|
||||
const props = withDefaults(defineProps<CapsProps>(), {});
|
||||
|
||||
const selectJtagSpeedOptions = ref([
|
||||
{ text: "25 MHz", id: 1 },
|
||||
{ text: "12.5 MHz", id: 2 },
|
||||
{ text: "6.25 MHz", id: 3 },
|
||||
{ text: "3.125 MHz", id: 4 },
|
||||
{ text: "1562.5 KHz", id: 5 },
|
||||
{ text: "781.25 KHz", id: 6 },
|
||||
{ text: "390.625 KHz", id: 7 },
|
||||
]);
|
||||
|
||||
// Global Stores
|
||||
const dialog = useDialogStore();
|
||||
const eqps = useEquipments();
|
||||
|
||||
const jtagBoundaryScanFreq = computed({
|
||||
get: () => eqps.jtagBoundaryScanFreq,
|
||||
set: (val) => {
|
||||
if (z.number().positive().max(1000).safeParse(val).success)
|
||||
eqps.jtagBoundaryScanFreq = val;
|
||||
},
|
||||
});
|
||||
|
||||
// 使用传入的属性或默认值
|
||||
const jtagIDCode = ref(0xffff_ffff);
|
||||
|
||||
function handleBitstreamChange(file: File | undefined) {
|
||||
eqps.jtagBitstream = file;
|
||||
}
|
||||
|
||||
function handleSelectJtagSpeed(event: Event) {
|
||||
const target = event.target as HTMLSelectElement;
|
||||
eqps.jtagSetSpeed(target.selectedIndex);
|
||||
emits("changeJtagFreq", target.value);
|
||||
}
|
||||
|
||||
async function toggleJtagBoundaryScan() {
|
||||
if (eqps.jtagClientMutex.isLocked()) {
|
||||
dialog.warn("Jtag正在被占用");
|
||||
return;
|
||||
}
|
||||
|
||||
eqps.enableJtagBoundaryScan = !eqps.enableJtagBoundaryScan;
|
||||
}
|
||||
|
||||
async function getIDCode(isQuiet: boolean = false) {
|
||||
jtagIDCode.value = await eqps.jtagGetIDCode(isQuiet);
|
||||
}
|
||||
|
||||
watchEffect(async () => {
|
||||
if (eqps.setAddr(props.jtagAddr) && eqps.setPort(props.jtagPort))
|
||||
getIDCode(true);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
@import "@/assets/main.css";
|
||||
</style>
|
||||
@@ -1,43 +1,36 @@
|
||||
<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"
|
||||
> <!-- 芯片外边框 - 用多段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"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- 芯片内层 - 增大尺寸 -->
|
||||
<rect width="280" height="280" x="60" y="60" fill="#0F1211" rx="2" ry="2" />
|
||||
</svg>
|
||||
<!-- 渲染芯片引脚 --> <div v-for="pin in computedPins" :key="pin.pinId"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${(pin.x || 0) * props.size * 0.37}px`,
|
||||
top: `${(pin.y || 0) * props.size * 0.37}px`,
|
||||
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)"
|
||||
/>
|
||||
<!-- 渲染芯片引脚 -->
|
||||
<div v-for="pin in computedPins" :key="pin.pinId" :style="{
|
||||
position: 'absolute',
|
||||
left: `${(pin.x || 0) * props.size * 0.37}px`,
|
||||
top: `${(pin.y || 0) * props.size * 0.37}px`,
|
||||
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)" />
|
||||
</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>>({});
|
||||
@@ -48,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: () => [],
|
||||
});
|
||||
|
||||
// 计算尺寸
|
||||
@@ -74,12 +67,12 @@ const computedPins = computed(() => {
|
||||
const yEnd = 400 - margin;
|
||||
const xStep = (xEnd - xStart) / (pinColumns - 1);
|
||||
const yStep = (yEnd - yStart) / (pinRows - 1);
|
||||
|
||||
|
||||
// 如果提供了pins，则合并引脚信息和位置信息
|
||||
if (props.pins && props.pins.length > 0) {
|
||||
// 复制一份提供的pins
|
||||
const mergedPins = [...props.pins];
|
||||
|
||||
|
||||
// 对于不包含xy坐标的引脚，生成默认的xy坐标
|
||||
for (let i = 0; i < mergedPins.length; i++) {
|
||||
const pin = mergedPins[i];
|
||||
@@ -87,59 +80,59 @@ const computedPins = computed(() => {
|
||||
if (pin.x === undefined || pin.y === undefined) {
|
||||
const row = Math.floor(i / pinColumns);
|
||||
const col = i % pinColumns;
|
||||
|
||||
|
||||
pin.x = xStart + col * xStep;
|
||||
pin.y = yStart + row * yStep;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return mergedPins;
|
||||
}
|
||||
|
||||
|
||||
// 否则生成默认的676个引脚，按BGA格式矩阵排列
|
||||
const pins = [];
|
||||
let pinIndex = 0;
|
||||
// 生成BGA封装的矩阵引脚
|
||||
// 生成BGA封装的矩阵引脚
|
||||
for (let row = 0; row < pinRows; row++) {
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return pins;
|
||||
});
|
||||
|
||||
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的系数确保居中对齐
|
||||
const scaledX = customPin.x * props.size * 0.37;
|
||||
const scaledY = customPin.y * props.size * 0.37;
|
||||
|
||||
|
||||
return {
|
||||
x: scaledX,
|
||||
y: scaledY
|
||||
y: scaledY,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -148,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,48 +102,51 @@ 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,
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
setAnalogValue: updateAnalogValue,
|
||||
getAnalogValue: () => analogValue.value,
|
||||
getAnalogValue: () => analogValue.value,
|
||||
getInfo: () => ({
|
||||
label: props.label,
|
||||
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'"
|
||||
:fill="isSegmentActive('a') ? segmentColor : inactiveColor"
|
||||
:style="{ opacity: isSegmentActive('a') ? 1 : 0.15 }"
|
||||
class="segment"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- b段 (右上竖线) -->
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- c段 (右下竖线) -->
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- d段 (底部横线) -->
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- e段 (左下竖线) -->
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- f段 (左上竖线) -->
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- g段 (中间横线) -->
|
||||
<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"
|
||||
/>
|
||||
<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" />
|
||||
</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,53 +54,62 @@ 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.startX,
|
||||
props.startY,
|
||||
props.endX,
|
||||
props.endY,
|
||||
props.pathCommands,
|
||||
);
|
||||
}
|
||||
// 否则使用正交路径
|
||||
return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY);
|
||||
return calculateOrthogonalPath(
|
||||
props.startX,
|
||||
props.startY,
|
||||
props.endX,
|
||||
props.endY,
|
||||
);
|
||||
});
|
||||
|
||||
function calculatePathFromCommands(
|
||||
startX: number,
|
||||
startY: number,
|
||||
endX: number,
|
||||
endY: number,
|
||||
commands: string[]
|
||||
startX: number,
|
||||
startY: number,
|
||||
endX: number,
|
||||
endY: number,
|
||||
commands: string[],
|
||||
) {
|
||||
// 找到分隔符索引，通常是 "*"
|
||||
const splitterIndex = commands.indexOf('*');
|
||||
const splitterIndex = commands.indexOf("*");
|
||||
if (splitterIndex === -1) {
|
||||
// 如果没有分隔符，回退到正交路径
|
||||
return calculateOrthogonalPath(startX, startY, endX, endY);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 分割命令为起点和终点两部分
|
||||
const startCommands = commands.slice(0, splitterIndex);
|
||||
const endCommands = commands.slice(splitterIndex + 1);
|
||||
@@ -118,10 +117,10 @@ function calculatePathFromCommands(
|
||||
// 从起点开始生成路径
|
||||
let currentX = startX;
|
||||
let currentY = startY;
|
||||
|
||||
|
||||
// 处理起点路径命令
|
||||
const pathPoints: [number, number][] = [[currentX, currentY]];
|
||||
|
||||
|
||||
// 解析并执行起点命令
|
||||
for (const cmd of startCommands) {
|
||||
const { newX, newY } = executePathCommand(currentX, currentY, cmd);
|
||||
@@ -129,13 +128,13 @@ function calculatePathFromCommands(
|
||||
currentY = newY;
|
||||
pathPoints.push([currentX, currentY]);
|
||||
}
|
||||
// 从终点开始反向处理
|
||||
// 从终点开始反向处理
|
||||
let endCurrentX = endX;
|
||||
let endCurrentY = endY;
|
||||
|
||||
|
||||
// 保存终点路径点，最后会反转
|
||||
const endPathPoints: [number, number][] = [[endCurrentX, endCurrentY]];
|
||||
|
||||
|
||||
// 解析并执行终点命令（需要从后向前执行反向命令）
|
||||
for (let i = endCommands.length - 1; i >= 0; i--) {
|
||||
const cmd = reversePathCommand(endCommands[i]);
|
||||
@@ -143,76 +142,91 @@ 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];
|
||||
}
|
||||
|
||||
|
||||
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}`;
|
||||
}
|
||||
|
||||
|
||||
// 使用所有点生成路径字符串
|
||||
let pathStr = `M ${allPoints[0][0]} ${allPoints[0][1]}`;
|
||||
for (let i = 1; i < allPoints.length; i++) {
|
||||
pathStr += ` L ${allPoints[i][0]} ${allPoints[i][1]}`;
|
||||
}
|
||||
|
||||
|
||||
return pathStr;
|
||||
}
|
||||
|
||||
// 执行单个路径命令
|
||||
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;
|
||||
@@ -236,23 +250,28 @@ function executePathCommand(x: number, y: number, command: string): { newX: numb
|
||||
newY = y - distance;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return { newX, newY };
|
||||
}
|
||||
|
||||
// 生成两点之间的正交连接点
|
||||
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;
|
||||
|
||||
|
||||
if (dx === 0 || dy === 0) {
|
||||
// 如果在同一水平或垂直线上，不需要额外点
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
// 选择先水平移动还是先垂直移动
|
||||
const middlePoints: [number, number][] = [];
|
||||
|
||||
|
||||
if (Math.abs(dx) > Math.abs(dy)) {
|
||||
// 先水平后垂直
|
||||
middlePoints.push([x1 + dx / 2, y1]);
|
||||
@@ -262,21 +281,26 @@ function generateOrthogonalConnection(x1: number, y1: number, x2: number, y2: nu
|
||||
middlePoints.push([x1, y1 + dy / 2]);
|
||||
middlePoints.push([x2, y1 + dy / 2]);
|
||||
}
|
||||
|
||||
|
||||
return middlePoints;
|
||||
}
|
||||
|
||||
// 计算正交路径
|
||||
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;
|
||||
|
||||
|
||||
// 如果在同一水平或垂直线上，直接连线
|
||||
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) {
|
||||
@@ -295,39 +319,33 @@ function reversePathCommand(command: string): string {
|
||||
// 提取距离部分
|
||||
const distanceMatch = command.match(/\d+$/);
|
||||
const distance = distanceMatch ? distanceMatch[0] : "10"; // 默认距离是10
|
||||
|
||||
|
||||
// 根据命令类型返回反向命令
|
||||
// 水平方向反转
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 默认情况下，无法反转就返回原命令
|
||||
return command;
|
||||
}
|
||||
@@ -354,39 +372,49 @@ onUnmounted(() => {
|
||||
});
|
||||
|
||||
// 监听约束属性变化
|
||||
watch(() => props.constraint, (newConstraint, oldConstraint) => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
unsubscribe = null;
|
||||
}
|
||||
|
||||
if (newConstraint) {
|
||||
unsubscribe = onConstraintStateChange((constraint, level) => {
|
||||
if (constraint === newConstraint) {
|
||||
// 约束状态变化，触发重新渲染
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
watch(
|
||||
() => props.constraint,
|
||||
(newConstraint, oldConstraint) => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
unsubscribe = null;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
||||
@@ -183,4 +183,4 @@ export function generatePropsFromAttrs(attrs: Record<string, any>): PropertyConf
|
||||
export function getPropValue(component: DiagramPart, propName: string): any {
|
||||
if (!component) return undefined;
|
||||
return (component as any)[propName];
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user