mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix initial node and sticky insert position in new canvas (no-changelog) (#10153)

Browse source
This commit is contained in:
Alex Grozav 2024-07-23 11:28:52 +03:00 committed by GitHub
parent 6b8ad6fc3e
commit 6209ac6824
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
View file

@ -2,7 +2,7 @@
/* eslint-disable vue/no-multiple-template-root */
import { useCanvasNode } from '@/composables/useCanvasNode';
import type { CanvasNodeStickyNoteRender } from '@/types';
import { ref, computed } from 'vue';
import { ref, computed, useCssModule } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import type { OnResize } from '@vue-flow/node-resizer/dist/types';
import type { XYPosition } from '@vue-flow/core';
@ -17,10 +17,17 @@ const emit = defineEmits<{
dblclick: [event: MouseEvent];
}>();
const { id, render } = useCanvasNode();
const $style = useCssModule();
const { id, isSelected, render } = useCanvasNode();
const renderOptions = computed(() => render.value.options as CanvasNodeStickyNoteRender['options']);
const classes = computed(() => ({
[$style.sticky]: true,
[$style.selected]: isSelected.value,
}));
/**
* Resizing
*/
@ -68,10 +75,10 @@ function onDoubleClick(event: MouseEvent) {
<N8nSticky
v-bind="$attrs"
:id="id"
:class="classes"
data-test-id="canvas-sticky-note-node"
:height="renderOptions.height"
:width="renderOptions.width"
:class="$style.sticky"
:model-value="renderOptions.content"
:background="renderOptions.color"
:edit-mode="isActive"
@ -84,5 +91,14 @@ function onDoubleClick(event: MouseEvent) {
<style lang="scss" module>
.sticky {
position: relative;
/**
* State classes
* The reverse order defines the priority in case multiple states are active
*/
&.selected {
box-shadow: 0 0 0 4px var(--color-canvas-selected);
}
}
</style>

14
packages/editor-ui/src/views/NodeView.v2.vue
View file

@ -29,7 +29,7 @@ import type {
ToggleNodeCreatorOptions,
XYPosition,
} from '@/Interface';
import type { Connection } from '@vue-flow/core';
import type { Connection, ViewportTransform } from '@vue-flow/core';
import type {
CanvasConnectionCreateData,
CanvasNode,
@ -135,7 +135,7 @@ const templatesStore = useTemplatesStore();
const canvasEventBus = createEventBus();
const lastClickPosition = ref<XYPosition>([450, 450]);
const lastClickPosition = ref<XYPosition>([0, 0]);
const { runWorkflow, stopCurrentExecution, stopWaitingForWebhook } = useRunWorkflow({ router });
const {
@ -1303,6 +1303,13 @@ async function onSaveFromWithinExecutionDebug() {
* Canvas
*/
const viewportTransform = ref<ViewportTransform>({ x: 0, y: 0, zoom: 1 });
function onViewportChange(event: ViewportTransform) {
viewportTransform.value = event;
uiStore.nodeViewOffsetPosition = [event.x, event.y];
}
function fitView() {
setTimeout(() => canvasEventBus.emit('fitView'));
}
@ -1500,6 +1507,7 @@ onBeforeUnmount(() => {
@run:workflow="onRunWorkflow"
@save:workflow="onSaveWorkflow"
@create:workflow="onCreateWorkflow"
@viewport-change="onViewportChange"
>
<div :class="$style.executionButtons">
<CanvasRunWorkflowButton
@ -1528,7 +1536,7 @@ onBeforeUnmount(() => {
<NodeCreation
v-if="!isCanvasReadOnly"
:create-node-active="uiStore.isCreateNodeActive"
:node-view-scale="1"
:node-view-scale="viewportTransform.zoom"
@toggle-node-creator="onOpenNodeCreator"
@add-nodes="onAddNodesAndConnections"
/>