|
|
|
@ -1,9 +1,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container" ref="canvasContainer"
|
|
|
|
|
@mousedown="handleCanvasMouseDown"
|
|
|
|
|
@mousedown.middle.prevent="startMiddleDrag"
|
|
|
|
|
@wheel.prevent="onZoom"
|
|
|
|
|
@contextmenu.prevent="handleContextMenu"> <!-- 工具栏 -->
|
|
|
|
|
@mousedown="handleCanvasMouseDown" @mousedown.middle.prevent="startMiddleDrag" @wheel.prevent="onZoom"
|
|
|
|
|
@contextmenu.prevent="handleContextMenu"> <!-- 工具栏 -->
|
|
|
|
|
<div class="absolute top-2 right-2 flex gap-2 z-30">
|
|
|
|
|
<button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
|
|
|
|
@ -27,9 +25,12 @@
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
|
|
|
</svg>
|
|
|
|
|
添加组件
|
|
|
|
|
</button> <button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
|
|
|
|
|
stroke="currentColor">
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
|
|
|
</svg>
|
|
|
|
|
{{ props.showDocPanel ? '属性面板' : '文档' }}
|
|
|
|
|
</button>
|
|
|
|
@ -63,15 +64,15 @@
|
|
|
|
|
'component-disabled': !component.isOn,
|
|
|
|
|
'component-hidepins': component.hidepins,
|
|
|
|
|
}" :style="{
|
|
|
|
|
top: component.y + 'px',
|
|
|
|
|
left: component.x + 'px',
|
|
|
|
|
zIndex: component.index ?? 0,
|
|
|
|
|
transform: component.rotate
|
|
|
|
|
? `rotate(${component.rotate}deg)`
|
|
|
|
|
: 'none',
|
|
|
|
|
opacity: component.isOn ? 1 : 0.6,
|
|
|
|
|
display: 'block',
|
|
|
|
|
}" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="hoveredComponent = component.id"
|
|
|
|
|
top: component.y + 'px',
|
|
|
|
|
left: component.x + 'px',
|
|
|
|
|
zIndex: component.index ?? 0,
|
|
|
|
|
transform: component.rotate
|
|
|
|
|
? `rotate(${component.rotate}deg)`
|
|
|
|
|
: 'none',
|
|
|
|
|
opacity: component.isOn ? 1 : 0.6,
|
|
|
|
|
display: 'block',
|
|
|
|
|
}" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="hoveredComponent = component.id"
|
|
|
|
|
@mouseleave="hoveredComponent = null">
|
|
|
|
|
<!-- 动态渲染组件 -->
|
|
|
|
|
<component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
|
|
|
|
@ -97,10 +98,10 @@
|
|
|
|
|
<!-- 通知组件 -->
|
|
|
|
|
<div v-if="showNotification" class="toast toast-top toast-center z-50 w-fit-content">
|
|
|
|
|
<div :class="`alert ${notificationType === 'success'
|
|
|
|
|
? 'alert-success'
|
|
|
|
|
: notificationType === 'error'
|
|
|
|
|
? 'alert-error'
|
|
|
|
|
: 'alert-info'
|
|
|
|
|
? 'alert-success'
|
|
|
|
|
: notificationType === 'error'
|
|
|
|
|
? 'alert-error'
|
|
|
|
|
: 'alert-info'
|
|
|
|
|
}`">
|
|
|
|
|
<span>{{ notificationMessage }}</span>
|
|
|
|
|
</div>
|
|
|
|
@ -162,6 +163,7 @@ const emit = defineEmits([
|
|
|
|
|
"component-selected",
|
|
|
|
|
"component-moved",
|
|
|
|
|
"component-delete",
|
|
|
|
|
"toggle-doc-panel",
|
|
|
|
|
"wire-created",
|
|
|
|
|
"wire-deleted",
|
|
|
|
|
"load-component-module",
|
|
|
|
|