n8n-editor-ui
Version:
Workflow Editor UI for n8n
250 lines (249 loc) • 11.5 kB
JavaScript
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/NodeCreator-D2HsLY6D.js","assets/_plugin-vue_export-helper-BwBpWJRZ.js","assets/src-BW7zuOU1.js","assets/preload-helper-CR0ecmWK.js","assets/icon-MZ_3fB_h.js","assets/vue.runtime.esm-bundler-tP5dCd7J.js","assets/chunk-6z4oVpB-.js","assets/truncate-Dc5upPom.js","assets/_MapCache-B159LOu5.js","assets/CalendarDate-DxkU3CHY.js","assets/sanitize-html-CgpOSgtK.js","assets/empty-4-N75rxI.js","assets/path-browserify-B5h_dP_u.js","assets/en-b3uD8cvU.js","assets/src-DZdTuyXH.css","assets/nodeCreator.store-DfjyHcRR.js","assets/constants-CX1ozgFz.js","assets/merge-BArJwbQo.js","assets/useTelemetry-C797TaYa.js","assets/_baseOrderBy-DL6Sy5xK.js","assets/dateformat-CMLc6OKJ.js","assets/useDebounce-RgPaX171.js","assets/useExternalHooks-CYMS6JpD.js","assets/nodeIcon-CdzjV7EE.js","assets/templates.store-CSx5YxpE.js","assets/cloudPlan.store-nppjm48S.js","assets/exports-0lA49Fnw.js","assets/useToast-ZaUhbG9w.js","assets/useStyles-DhM0cpS7.js","assets/useCanvasOperations-B_GKebCJ.js","assets/useClipboard-B4OWL4sL.js","assets/usePinnedData-BPdJqXOY.js","assets/focusPanel.store-Dys3muoU.js","assets/folders.store-zKqujIOj.js","assets/executions.store-Cu3L65gQ.js","assets/semver-CSrR6yZm.js","assets/banners.store-Bucfp6Le.js","assets/banners-UK5wWFEI.css","assets/assistant.store-CES0bOwj.js","assets/NodeIcon-DywH900v.js","assets/NodeIcon-eaW3atZy.css","assets/ItemsRenderer-DUtIRbRA.js","assets/useActions-Bc_58LkU.js","assets/ItemsRenderer-Cr6c6uYy.css","assets/chatPanel.store-DxVV7Zn2.js","assets/CommunityNodeUpdateInfo-DRQanjaS.js","assets/CommunityNodeUpdateInfo-kPDiipF5.css","assets/NodeCreator-JpUhf2LN.css"])))=>i.map(i=>d[i]);
import { Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, G as nextTick, Gt as unref, M as createVNode, N as defineAsyncComponent, P as defineComponent, T as createBlock, _ as Fragment, bt as withCtx, et as openBlock, j as createTextVNode, vn as normalizeClass, w as createBaseVNode, y as Suspense } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
import { gt as useI18n } from "./_MapCache-B159LOu5.js";
import { Hn as N8nButton_default, ct as AskAssistantIcon_default, mt as N8nTooltip_default, xt as N8nIconButton_default } from "./src-BW7zuOU1.js";
import "./en-b3uD8cvU.js";
import { t as __vitePreload } from "./preload-helper-CR0ecmWK.js";
import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
import "./truncate-Dc5upPom.js";
import "./icon-MZ_3fB_h.js";
import "./overlay-CftFqN-S.js";
import "./empty-4-N75rxI.js";
import "./useMessage-C1bozAQq.js";
import { Fi as useUIStore, t as useTelemetry, v as getMidCanvasPosition } from "./useTelemetry-C797TaYa.js";
import "./useToast-ZaUhbG9w.js";
import "./sanitize-html-CgpOSgtK.js";
import "./CalendarDate-DxkU3CHY.js";
import "./path-browserify-B5h_dP_u.js";
import { Ct as NODE_CREATOR_OPEN_SOURCES, G as DEFAULT_STICKY_WIDTH, W as DEFAULT_STICKY_HEIGHT, ur as STICKY_NODE_TYPE } from "./constants-CX1ozgFz.js";
import "./merge-BArJwbQo.js";
import { i as useBuilderStore, t as useAssistantStore } from "./assistant.store-CES0bOwj.js";
import "./_baseOrderBy-DL6Sy5xK.js";
import "./dateformat-CMLc6OKJ.js";
import "./useDebounce-RgPaX171.js";
import "./useExternalHooks-CYMS6JpD.js";
import "./useStyles-DhM0cpS7.js";
import { t as useChatPanelStore } from "./chatPanel.store-DxVV7Zn2.js";
import "./npsSurvey.store-BuKohzKX.js";
import "./cloudPlan.store-nppjm48S.js";
import "./templates.store-CSx5YxpE.js";
import { t as useFocusPanelStore } from "./focusPanel.store-Dys3muoU.js";
import "./useWorkflowSaving-D0h-y5mZ.js";
import "./retry-CalJieID.js";
import "./executions.store-Cu3L65gQ.js";
import "./useRunWorkflow-B0MrxSlI.js";
import "./usePinnedData-BPdJqXOY.js";
import "./nodeCreator.store-DfjyHcRR.js";
import "./nodeIcon-CdzjV7EE.js";
import "./useClipboard-B4OWL4sL.js";
import "./useCanvasOperations-B_GKebCJ.js";
import "./folders.store-zKqujIOj.js";
import "./NodeIcon-DywH900v.js";
import { t as KeyboardShortcutTooltip_default } from "./KeyboardShortcutTooltip-Bbdv20lT.js";
import "./versions.store-BYh7N-zv.js";
import "./usePageRedirectionHelper-DY-ECTME.js";
import "./dataTable.store-DbXbbBi8.js";
import "./useBugReporting-B_5-Tujg.js";
import "./uniqBy-BAsCSiRe.js";
import "./ProjectIcon-C-YEsNSL.js";
import "./CredentialIcon-DJSoDYWS.js";
import "./FileSaver.min-BZ3jw69B.js";
import "./sortByProperty-DeupcrDk.js";
import "./useRecentResources-kKbG_n-r.js";
import { t as useActions } from "./useActions-Bc_58LkU.js";
import { t as useCommandBar } from "./useCommandBar-8KWbE0SR.js";
import "./useWorkflowActivate-Bjltj_L5.js";
var NodeCreation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "NodeCreation",
props: {
nodeViewScale: {},
createNodeActive: {
type: Boolean,
default: false
},
focusPanelActive: { type: Boolean }
},
emits: [
"addNodes",
"toggleNodeCreator",
"close"
],
setup(__props, { emit: __emit }) {
const LazyNodeCreator = defineAsyncComponent(async () => await __vitePreload(() => import("./NodeCreator-D2HsLY6D.js"), __vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47])));
const props = __props;
const emit = __emit;
const uiStore = useUIStore();
const focusPanelStore = useFocusPanelStore();
const i18n = useI18n();
const telemetry = useTelemetry();
const assistantStore = useAssistantStore();
const builderStore = useBuilderStore();
const chatPanelStore = useChatPanelStore();
const { isEnabled: isCommandBarEnabled } = useCommandBar();
const { getAddedNodesAndConnections } = useActions();
function openNodeCreator() {
emit("toggleNodeCreator", {
source: NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
createNodeActive: true
});
}
function addStickyNote() {
if (document.activeElement) document.activeElement.blur();
const offset = [...uiStore.nodeViewOffsetPosition];
const position = getMidCanvasPosition(props.nodeViewScale, offset);
position[0] -= 240 / 2;
position[1] -= 160 / 2;
emit("addNodes", getAddedNodesAndConnections([{
type: STICKY_NODE_TYPE,
position
}]));
}
function closeNodeCreator(hasAddedNodes = false) {
if (props.createNodeActive) emit("toggleNodeCreator", {
createNodeActive: false,
hasAddedNodes
});
emit("close");
}
function nodeTypeSelected(value) {
emit("addNodes", getAddedNodesAndConnections(value));
closeNodeCreator(true);
}
function toggleFocusPanel() {
focusPanelStore.toggleFocusPanel();
telemetry.track(focusPanelStore.focusPanelActive ? "User opened focus panel" : "User closed focus panel", {
source: "canvasButton",
parameters: focusPanelStore.focusedNodeParametersInTelemetryFormat
});
}
async function onAskAssistantButtonClick() {
if (builderStore.isAIBuilderEnabled) await chatPanelStore.toggle({ mode: "builder" });
else await chatPanelStore.toggle({ mode: "assistant" });
if (chatPanelStore.isOpen) assistantStore.trackUserOpenedAssistant({
source: "canvas",
task: "placeholder",
has_existing_session: !assistantStore.isSessionEnded
});
}
function openCommandBar(event) {
event.stopPropagation();
nextTick(() => {
const keyboardEvent = new KeyboardEvent("keydown", {
key: "k",
code: "KeyK",
metaKey: true,
bubbles: true,
cancelable: true
});
document.dispatchEvent(keyboardEvent);
});
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [!_ctx.createNodeActive ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style.nodeButtonsWrapper)
}, [
createVNode(KeyboardShortcutTooltip_default, {
label: unref(i18n).baseText("nodeView.openNodesPanel"),
shortcut: { keys: ["Tab"] },
placement: "left"
}, {
default: withCtx(() => [createVNode(unref(N8nIconButton_default), {
size: "large",
icon: "plus",
type: "tertiary",
"data-test-id": "node-creator-plus-button",
onClick: openNodeCreator
})]),
_: 1
}, 8, ["label"]),
unref(isCommandBarEnabled) ? (openBlock(), createBlock(KeyboardShortcutTooltip_default, {
key: 0,
label: unref(i18n).baseText("nodeView.openCommandBar"),
shortcut: {
keys: ["k"],
metaKey: true
},
placement: "left"
}, {
default: withCtx(() => [createVNode(unref(N8nIconButton_default), {
size: "large",
icon: "search",
type: "tertiary",
"data-test-id": "command-bar-button",
onClick: openCommandBar
})]),
_: 1
}, 8, ["label"])) : createCommentVNode("", true),
createVNode(KeyboardShortcutTooltip_default, {
label: unref(i18n).baseText("nodeView.addStickyHint"),
shortcut: {
keys: ["s"],
shiftKey: true
},
placement: "left"
}, {
default: withCtx(() => [createVNode(unref(N8nIconButton_default), {
size: "large",
type: "tertiary",
icon: "sticky-note",
"data-test-id": "add-sticky-button",
onClick: addStickyNote
})]),
_: 1
}, 8, ["label"]),
createVNode(KeyboardShortcutTooltip_default, {
label: unref(i18n).baseText("nodeView.openFocusPanel"),
shortcut: {
keys: ["f"],
shiftKey: true
},
placement: "left"
}, {
default: withCtx(() => [createVNode(unref(N8nIconButton_default), {
type: "tertiary",
size: "large",
icon: "panel-right",
class: normalizeClass(_ctx.focusPanelActive ? _ctx.$style.activeButton : ""),
active: _ctx.focusPanelActive,
"data-test-id": "toggle-focus-panel-button",
onClick: toggleFocusPanel
}, null, 8, ["class", "active"])]),
_: 1
}, 8, ["label"]),
unref(chatPanelStore).canShowAiButtonOnCanvas ? (openBlock(), createBlock(unref(N8nTooltip_default), {
key: 1,
placement: "left"
}, {
content: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("aiAssistant.tooltip")), 1)]),
default: withCtx(() => [createVNode(unref(N8nButton_default), {
type: "tertiary",
size: "large",
square: "",
class: normalizeClass(_ctx.$style.icon),
"data-test-id": "ask-assistant-canvas-action-button",
onClick: onAskAssistantButtonClick
}, {
default: withCtx(() => [createBaseVNode("div", null, [createVNode(unref(AskAssistantIcon_default), { size: "large" })])]),
_: 1
}, 8, ["class"])]),
_: 1
})) : createCommentVNode("", true)
], 2)) : createCommentVNode("", true), (openBlock(), createBlock(Suspense, null, {
default: withCtx(() => [createVNode(unref(LazyNodeCreator), {
active: _ctx.createNodeActive,
onNodeTypeSelected: nodeTypeSelected,
onCloseNodeCreator: closeNodeCreator
}, null, 8, ["active"])]),
_: 1
}))], 64);
};
}
});
var NodeCreation_vue_vue_type_style_index_0_lang_module_default = {
nodeButtonsWrapper: "_nodeButtonsWrapper_13o6j_123",
icon: "_icon_13o6j_134",
activeButton: "_activeButton_13o6j_143"
};
var NodeCreation_default = /* @__PURE__ */ __plugin_vue_export_helper_default(NodeCreation_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": NodeCreation_vue_vue_type_style_index_0_lang_module_default }]]);
export { NodeCreation_default as default };