Update Nuxt Configuration and Enhance ProcessFlowCanvas Component
- Added optimization settings for 'vue-toastification' in nuxt.config.js to improve dependency handling. - Wrapped VueFlow component in a <client-only> tag within ProcessFlowCanvas.vue to prevent server-side rendering issues, ensuring proper rendering of flow components only on the client side. - Maintained existing functionality while enhancing the user experience in the process flow interface.
This commit is contained in:
parent
84e8d8e42f
commit
fa016ac1b3
@ -1135,88 +1135,88 @@ function fromObject(flowObject) {
|
||||
@drop="onDrop"
|
||||
@dragover="onDragOver"
|
||||
>
|
||||
<VueFlow
|
||||
v-bind="flowOptions"
|
||||
class="bg-slate-50 process-flow"
|
||||
:nodeTypes="customNodeTypes"
|
||||
:edgeTypes="edgeTypes"
|
||||
@node-click="onNodeClick"
|
||||
@edge-click="onEdgeClick"
|
||||
@pane-click="onPaneClick"
|
||||
@connect="handleConnect"
|
||||
@nodeDoubleClick="onNodeDelete"
|
||||
@edgeDoubleClick="onEdgeDelete"
|
||||
@keyup.delete="onDeleteKeyPress"
|
||||
>
|
||||
<!-- Global SVG definitions for arrows -->
|
||||
<svg style="position: absolute; top: 0; left: 0; width: 0; height: 0">
|
||||
<defs>
|
||||
<marker
|
||||
id="arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="9"
|
||||
refY="3"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto"
|
||||
markerUnits="strokeWidth"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#555" />
|
||||
</marker>
|
||||
<marker
|
||||
id="arrow-selected"
|
||||
viewBox="0 0 10 10"
|
||||
refX="9"
|
||||
refY="3"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto"
|
||||
markerUnits="strokeWidth"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#ff6b6b" />
|
||||
</marker>
|
||||
<marker
|
||||
id="arrow-animated"
|
||||
viewBox="0 0 10 10"
|
||||
refX="9"
|
||||
refY="3"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto"
|
||||
markerUnits="strokeWidth"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
<Background pattern-color="#aaa" gap="20" />
|
||||
<Controls />
|
||||
<MiniMap />
|
||||
|
||||
<!-- Custom edge template -->
|
||||
<template #edge-custom="edgeProps">
|
||||
<InteractiveArrowEdge v-bind="edgeProps" />
|
||||
</template>
|
||||
|
||||
<template #edge-label="{ label }">
|
||||
<div class="edge-label">{{ label }}</div>
|
||||
</template>
|
||||
|
||||
<Panel position="top-right" class="node-controls">
|
||||
<div class="p-2 bg-white rounded shadow-sm text-sm">
|
||||
<div class="mb-1 font-medium">Controls:</div>
|
||||
<div>• Delete: Remove selected</div>
|
||||
<div>• Shift: Select nodes</div>
|
||||
<div>• Drag between nodes to connect</div>
|
||||
<div>• Double-click to remove</div>
|
||||
<div class="mt-2 mb-1 font-medium">Edge Features:</div>
|
||||
<div>• Arrows show flow direction</div>
|
||||
<div>• Select edge for controls</div>
|
||||
<div>• Blue dot = drag to reposition</div>
|
||||
<div>• Reset button restores path</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</VueFlow>
|
||||
<client-only>
|
||||
<VueFlow
|
||||
v-if="nodes.length > 0"
|
||||
v-bind="flowOptions"
|
||||
class="bg-slate-50 process-flow"
|
||||
:nodeTypes="customNodeTypes"
|
||||
:edgeTypes="edgeTypes"
|
||||
@node-click="onNodeClick"
|
||||
@edge-click="onEdgeClick"
|
||||
@pane-click="onPaneClick"
|
||||
@connect="handleConnect"
|
||||
@nodeDoubleClick="onNodeDelete"
|
||||
@edgeDoubleClick="onEdgeDelete"
|
||||
@keyup.delete="onDeleteKeyPress"
|
||||
>
|
||||
<!-- Global SVG definitions for arrows -->
|
||||
<svg style="position: absolute; top: 0; left: 0; width: 0; height: 0">
|
||||
<defs>
|
||||
<marker
|
||||
id="arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="9"
|
||||
refY="3"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto"
|
||||
markerUnits="strokeWidth"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#555" />
|
||||
</marker>
|
||||
<marker
|
||||
id="arrow-selected"
|
||||
viewBox="0 0 10 10"
|
||||
refX="9"
|
||||
refY="3"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto"
|
||||
markerUnits="strokeWidth"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#ff6b6b" />
|
||||
</marker>
|
||||
<marker
|
||||
id="arrow-animated"
|
||||
viewBox="0 0 10 10"
|
||||
refX="9"
|
||||
refY="3"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto"
|
||||
markerUnits="strokeWidth"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
<Background pattern-color="#aaa" gap="20" />
|
||||
<Controls />
|
||||
<MiniMap />
|
||||
<!-- Custom edge template -->
|
||||
<template #edge-custom="edgeProps">
|
||||
<InteractiveArrowEdge v-bind="edgeProps" />
|
||||
</template>
|
||||
<template #edge-label="{ label }">
|
||||
<div class="edge-label">{{ label }}</div>
|
||||
</template>
|
||||
<Panel position="top-right" class="node-controls">
|
||||
<div class="p-2 bg-white rounded shadow-sm text-sm">
|
||||
<div class="mb-1 font-medium">Controls:</div>
|
||||
<div>• Delete: Remove selected</div>
|
||||
<div>• Shift: Select nodes</div>
|
||||
<div>• Drag between nodes to connect</div>
|
||||
<div>• Double-click to remove</div>
|
||||
<div class="mt-2 mb-1 font-medium">Edge Features:</div>
|
||||
<div>• Arrows show flow direction</div>
|
||||
<div>• Select edge for controls</div>
|
||||
<div>• Blue dot = drag to reposition</div>
|
||||
<div>• Reset button restores path</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</VueFlow>
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -29,6 +29,12 @@ export default defineNuxtConfig({
|
||||
interval: 1000,
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['vue-toastification'],
|
||||
},
|
||||
ssr: {
|
||||
noExternal: ['vue-toastification'],
|
||||
},
|
||||
},
|
||||
head: {
|
||||
title: "corrad",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user