mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(editor): Fix duplicate NodeView keys when navigating between routes (no-changelog) (#5325)

Browse Source 
* refactor(editor): Fix duplicate NodeView keys when navigating between routes (no-changelog)

* Prettier fixes

* Use computed to export jsPlumb instance from canvas

* Force jsPlumb computed instance type
This commit is contained in:
OlegIvaniv
2023-02-02 09:05:14 +01:00
committed by GitHub
parent 8f5f1c3aa5
commit 96ec5bc880
3 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/editor-ui/src/stores/canvas.ts
View File

@@ -8,7 +8,7 @@ import { useUIStore } from '@/stores/ui';
import { useHistoryStore } from '@/stores/history';
import { INodeUi, XYPosition } from '@/Interface';
import { scaleBigger, scaleReset, scaleSmaller } from '@/utils';
import { START_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
import { START_NODE_TYPE } from '@/constants';
import type {
BeforeStartEventParams,
BrowserJsPlumbInstance,
@@ -37,7 +37,7 @@ export const useCanvasStore = defineStore('canvas', () => {
const uiStore = useUIStore();
const historyStore = useHistoryStore();
const jsPlumbInstance = ref<BrowserJsPlumbInstance>();
const jsPlumbInstanceRef = ref<BrowserJsPlumbInstance>();
const isDragging = ref<boolean>(false);
const nodes = computed<INodeUi[]>(() => workflowStore.allNodes);
@@ -78,7 +78,7 @@ export const useCanvasStore = defineStore('canvas', () => {
const setZoomLevel = (zoomLevel: number, offset: XYPosition) => {
nodeViewScale.value = zoomLevel;
jsPlumbInstance.value?.setZoom(zoomLevel);
jsPlumbInstanceRef.value?.setZoom(zoomLevel);
uiStore.nodeViewOffsetPosition = offset;
};
@@ -143,13 +143,13 @@ export const useCanvasStore = defineStore('canvas', () => {
function initInstance(container: Element) {
// Make sure to clean-up previous instance if it exists
if (jsPlumbInstance.value) {
jsPlumbInstance.value.destroy();
jsPlumbInstance.value.reset();
jsPlumbInstance.value = undefined;
if (jsPlumbInstanceRef.value) {
jsPlumbInstanceRef.value.destroy();
jsPlumbInstanceRef.value.reset();
jsPlumbInstanceRef.value = undefined;
}
jsPlumbInstance.value = newInstance({
jsPlumbInstanceRef.value = newInstance({
container,
connector: CONNECTOR_FLOWCHART_TYPE,
resizeObserver: false,
@@ -168,7 +168,7 @@ export const useCanvasStore = defineStore('canvas', () => {
// Only the node which gets dragged directly gets an event, for all others it is
// undefined. So check if the currently dragged node is selected and if not clear
// the drag-selection.
jsPlumbInstance.value?.clearDragSelection();
jsPlumbInstanceRef.value?.clearDragSelection();
uiStore.resetSelectedNodes();
}
@@ -231,7 +231,7 @@ export const useCanvasStore = defineStore('canvas', () => {
filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
},
});
jsPlumbInstance.value?.setDragConstrainFunction((pos: PointXY) => {
jsPlumbInstanceRef.value?.setDragConstrainFunction((pos: PointXY) => {
const isReadOnly = uiStore.isReadOnlyView;
if (isReadOnly) {
// Do not allow to move nodes in readOnly mode
@@ -240,6 +240,8 @@ export const useCanvasStore = defineStore('canvas', () => {
return pos;
});
}
const jsPlumbInstance = computed(() => jsPlumbInstanceRef.value as BrowserJsPlumbInstance);
return {
isDemo,
nodeViewScale,