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"
|
@drop="onDrop"
|
||||||
@dragover="onDragOver"
|
@dragover="onDragOver"
|
||||||
>
|
>
|
||||||
<VueFlow
|
<client-only>
|
||||||
v-bind="flowOptions"
|
<VueFlow
|
||||||
class="bg-slate-50 process-flow"
|
v-if="nodes.length > 0"
|
||||||
:nodeTypes="customNodeTypes"
|
v-bind="flowOptions"
|
||||||
:edgeTypes="edgeTypes"
|
class="bg-slate-50 process-flow"
|
||||||
@node-click="onNodeClick"
|
:nodeTypes="customNodeTypes"
|
||||||
@edge-click="onEdgeClick"
|
:edgeTypes="edgeTypes"
|
||||||
@pane-click="onPaneClick"
|
@node-click="onNodeClick"
|
||||||
@connect="handleConnect"
|
@edge-click="onEdgeClick"
|
||||||
@nodeDoubleClick="onNodeDelete"
|
@pane-click="onPaneClick"
|
||||||
@edgeDoubleClick="onEdgeDelete"
|
@connect="handleConnect"
|
||||||
@keyup.delete="onDeleteKeyPress"
|
@nodeDoubleClick="onNodeDelete"
|
||||||
>
|
@edgeDoubleClick="onEdgeDelete"
|
||||||
<!-- Global SVG definitions for arrows -->
|
@keyup.delete="onDeleteKeyPress"
|
||||||
<svg style="position: absolute; top: 0; left: 0; width: 0; height: 0">
|
>
|
||||||
<defs>
|
<!-- Global SVG definitions for arrows -->
|
||||||
<marker
|
<svg style="position: absolute; top: 0; left: 0; width: 0; height: 0">
|
||||||
id="arrow"
|
<defs>
|
||||||
viewBox="0 0 10 10"
|
<marker
|
||||||
refX="9"
|
id="arrow"
|
||||||
refY="3"
|
viewBox="0 0 10 10"
|
||||||
markerWidth="6"
|
refX="9"
|
||||||
markerHeight="6"
|
refY="3"
|
||||||
orient="auto"
|
markerWidth="6"
|
||||||
markerUnits="strokeWidth"
|
markerHeight="6"
|
||||||
>
|
orient="auto"
|
||||||
<path d="M0,0 L0,6 L9,3 z" fill="#555" />
|
markerUnits="strokeWidth"
|
||||||
</marker>
|
>
|
||||||
<marker
|
<path d="M0,0 L0,6 L9,3 z" fill="#555" />
|
||||||
id="arrow-selected"
|
</marker>
|
||||||
viewBox="0 0 10 10"
|
<marker
|
||||||
refX="9"
|
id="arrow-selected"
|
||||||
refY="3"
|
viewBox="0 0 10 10"
|
||||||
markerWidth="6"
|
refX="9"
|
||||||
markerHeight="6"
|
refY="3"
|
||||||
orient="auto"
|
markerWidth="6"
|
||||||
markerUnits="strokeWidth"
|
markerHeight="6"
|
||||||
>
|
orient="auto"
|
||||||
<path d="M0,0 L0,6 L9,3 z" fill="#ff6b6b" />
|
markerUnits="strokeWidth"
|
||||||
</marker>
|
>
|
||||||
<marker
|
<path d="M0,0 L0,6 L9,3 z" fill="#ff6b6b" />
|
||||||
id="arrow-animated"
|
</marker>
|
||||||
viewBox="0 0 10 10"
|
<marker
|
||||||
refX="9"
|
id="arrow-animated"
|
||||||
refY="3"
|
viewBox="0 0 10 10"
|
||||||
markerWidth="6"
|
refX="9"
|
||||||
markerHeight="6"
|
refY="3"
|
||||||
orient="auto"
|
markerWidth="6"
|
||||||
markerUnits="strokeWidth"
|
markerHeight="6"
|
||||||
>
|
orient="auto"
|
||||||
<path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
|
markerUnits="strokeWidth"
|
||||||
</marker>
|
>
|
||||||
</defs>
|
<path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
|
||||||
</svg>
|
</marker>
|
||||||
<Background pattern-color="#aaa" gap="20" />
|
</defs>
|
||||||
<Controls />
|
</svg>
|
||||||
<MiniMap />
|
<Background pattern-color="#aaa" gap="20" />
|
||||||
|
<Controls />
|
||||||
<!-- Custom edge template -->
|
<MiniMap />
|
||||||
<template #edge-custom="edgeProps">
|
<!-- Custom edge template -->
|
||||||
<InteractiveArrowEdge v-bind="edgeProps" />
|
<template #edge-custom="edgeProps">
|
||||||
</template>
|
<InteractiveArrowEdge v-bind="edgeProps" />
|
||||||
|
</template>
|
||||||
<template #edge-label="{ label }">
|
<template #edge-label="{ label }">
|
||||||
<div class="edge-label">{{ label }}</div>
|
<div class="edge-label">{{ label }}</div>
|
||||||
</template>
|
</template>
|
||||||
|
<Panel position="top-right" class="node-controls">
|
||||||
<Panel position="top-right" class="node-controls">
|
<div class="p-2 bg-white rounded shadow-sm text-sm">
|
||||||
<div class="p-2 bg-white rounded shadow-sm text-sm">
|
<div class="mb-1 font-medium">Controls:</div>
|
||||||
<div class="mb-1 font-medium">Controls:</div>
|
<div>• Delete: Remove selected</div>
|
||||||
<div>• Delete: Remove selected</div>
|
<div>• Shift: Select nodes</div>
|
||||||
<div>• Shift: Select nodes</div>
|
<div>• Drag between nodes to connect</div>
|
||||||
<div>• Drag between nodes to connect</div>
|
<div>• Double-click to remove</div>
|
||||||
<div>• Double-click to remove</div>
|
<div class="mt-2 mb-1 font-medium">Edge Features:</div>
|
||||||
<div class="mt-2 mb-1 font-medium">Edge Features:</div>
|
<div>• Arrows show flow direction</div>
|
||||||
<div>• Arrows show flow direction</div>
|
<div>• Select edge for controls</div>
|
||||||
<div>• Select edge for controls</div>
|
<div>• Blue dot = drag to reposition</div>
|
||||||
<div>• Blue dot = drag to reposition</div>
|
<div>• Reset button restores path</div>
|
||||||
<div>• Reset button restores path</div>
|
</div>
|
||||||
</div>
|
</Panel>
|
||||||
</Panel>
|
</VueFlow>
|
||||||
</VueFlow>
|
</client-only>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -29,6 +29,12 @@ export default defineNuxtConfig({
|
|||||||
interval: 1000,
|
interval: 1000,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
include: ['vue-toastification'],
|
||||||
|
},
|
||||||
|
ssr: {
|
||||||
|
noExternal: ['vue-toastification'],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
head: {
|
head: {
|
||||||
title: "corrad",
|
title: "corrad",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user