+
+
import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faArrowRight, faHistory } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { useMagicKeys, whenever } from "@vueuse/core";
import { logicAnd, logicNot, logicOr } from "@vueuse/math";
@@ -217,10 +225,11 @@ import WorkflowGraph from "./WorkflowGraph.vue";
import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
import FlexPanel from "@/components/Panels/FlexPanel.vue";
import ToolPanel from "@/components/Panels/ToolPanel.vue";
+import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
-library.add(faArrowLeft, faArrowRight);
+library.add(faArrowLeft, faArrowRight, faHistory);
export default {
components: {
@@ -238,6 +247,7 @@ export default {
MessagesModal,
WorkflowGraph,
FontAwesomeIcon,
+ UndoRedoStack,
},
props: {
workflowId: {
@@ -291,8 +301,18 @@ export default {
}
const showInPanel = ref("attributes");
+ const showChanges = ref(false);
+
+ function toggleShowChanges() {
+ ensureParametersSet();
+ showChanges.value = !showChanges.value;
+ }
+
+ function showAttributes(closeChanges = false) {
+ if (closeChanges) {
+ showChanges.value = false;
+ }
- function showAttributes() {
ensureParametersSet();
stateStore.activeNodeId = null;
showInPanel.value = "attributes";
@@ -441,6 +461,8 @@ export default {
parameters,
ensureParametersSet,
showInPanel,
+ showChanges,
+ toggleShowChanges,
showAttributes,
setName,
report,
@@ -498,12 +520,6 @@ export default {
};
},
computed: {
- attributesVisible() {
- return this.showInPanel == "attributes";
- },
- showLint() {
- return this.showInPanel == "lint";
- },
activeNodeType() {
return this.activeStep?.type;
},
@@ -706,10 +722,6 @@ export default {
});
});
},
- onWorkflowTextEditor() {
- this.stateStore.activeNodeId = null;
- this.showInPanel = "attributes";
- },
onAnnotation(nodeId, newAnnotation) {
this.stepActions.setAnnotation(this.steps[nodeId], newAnnotation);
},
@@ -786,6 +798,7 @@ export default {
this.ensureParametersSet();
this.stateStore.activeNodeId = null;
this.showInPanel = "lint";
+ this.showChanges = false;
},
onUpgrade() {
this.onAttemptRefactor([{ action_type: "upgrade_all_steps" }]);
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
index c5e959598772..6c966f52be53 100644
--- a/client/src/components/Workflow/Editor/Options.vue
+++ b/client/src/components/Workflow/Editor/Options.vue
@@ -1,9 +1,25 @@
+
diff --git a/client/src/composables/math.ts b/client/src/composables/math.ts
new file mode 100644
index 000000000000..421a9ca24aa5
--- /dev/null
+++ b/client/src/composables/math.ts
@@ -0,0 +1,49 @@
+/**
+ * There are similar functions to those in this module in vue-use, but they only work one-way.
+ * Unlike vue-use, these composables return refs which can be set.
+ */
+
+import { type MaybeRefOrGetter, toValue } from "@vueuse/core";
+import { computed, type Ref } from "vue";
+
+/**
+ * Wraps a number ref, restricting it's values to a given range
+ *
+ * @param ref ref containing a number to wrap
+ * @param min lowest possible value of range
+ * @param max highest possible value of range
+ * @returns clamped ref
+ */
+export function useClamp(ref: Ref, min: MaybeRefOrGetter, max: MaybeRefOrGetter): Ref {
+ const clamp = (value: number) => {
+ return Math.min(Math.max(value, toValue(min)), toValue(max));
+ };
+
+ const clampedRef = computed({
+ get: () => clamp(ref.value),
+ set: (value) => (ref.value = clamp(value)),
+ });
+
+ return clampedRef;
+}
+
+/**
+ * Wraps a number ref, restricting it's values to align to a given step size
+ *
+ * @param ref ref containing a number to wrap
+ * @param [stepSize = 1] size of steps to restrict value to. defaults to 1
+ * @returns wrapped red
+ */
+export function useStep(ref: Ref, stepSize: MaybeRefOrGetter = 1): Ref {
+ const step = (value: number) => {
+ const stepSizeValue = toValue(stepSize);
+ return Math.round(value / stepSizeValue) * stepSizeValue;
+ };
+
+ const steppedRef = computed({
+ get: () => step(ref.value),
+ set: (value) => (ref.value = step(value)),
+ });
+
+ return steppedRef;
+}
diff --git a/client/src/stores/undoRedoStore/index.ts b/client/src/stores/undoRedoStore/index.ts
index da8c354e513f..f83dd6f6d103 100644
--- a/client/src/stores/undoRedoStore/index.ts
+++ b/client/src/stores/undoRedoStore/index.ts
@@ -1,5 +1,7 @@
import { computed, ref } from "vue";
+import { useClamp, useStep } from "@/composables/math";
+import { useUserLocalStorage } from "@/composables/userLocalStorage";
import { defineScopedStore } from "@/stores/scopedStore";
import { type LazyUndoRedoAction, UndoRedoAction } from "./undoRedoAction";
@@ -8,14 +10,34 @@ export { LazyUndoRedoAction, UndoRedoAction } from "./undoRedoAction";
export type UndoRedoStore = ReturnType;
+export class ActionOutOfBoundsError extends Error {
+ public action: UndoRedoAction;
+
+ constructor(action: UndoRedoAction, bounds: "undo" | "redo") {
+ super(`The action "${action.name}" is not in the ${bounds} stack`);
+ this.action = action;
+ }
+}
+
export const useUndoRedoStore = defineScopedStore("undoRedoStore", () => {
const undoActionStack = ref([]);
const redoActionStack = ref([]);
- const maxUndoActions = ref(100);
+
+ const minUndoActions = ref(10);
+ const maxUndoActions = ref(10000);
+
+ const savedUndoActionsValue = useUserLocalStorage(`undoRedoStore-savedUndoActions`, 100);
+ const savedUndoActions = useClamp(useStep(savedUndoActionsValue), minUndoActions, maxUndoActions);
+
+ /** names of actions which were deleted due to savedUndoActions being exceeded */
+ const deletedActions = ref([]);
function $reset() {
undoActionStack.value.forEach((action) => action.destroy());
undoActionStack.value = [];
+ deletedActions.value = [];
+ minUndoActions.value = 10;
+ maxUndoActions.value = 10000;
clearRedoStack();
}
@@ -44,8 +66,9 @@ export const useUndoRedoStore = defineScopedStore("undoRedoStore", () => {
clearRedoStack();
undoActionStack.value.push(action);
- while (undoActionStack.value.length > maxUndoActions.value && undoActionStack.value.length > 0) {
+ while (undoActionStack.value.length > savedUndoActions.value && undoActionStack.value.length > 0) {
const action = undoActionStack.value.shift();
+ deletedActions.value.push(action?.name ?? "unnamed action");
action?.destroy();
}
}
@@ -141,10 +164,39 @@ export const useUndoRedoStore = defineScopedStore("undoRedoStore", () => {
}
});
+ function rollBackTo(action: UndoRedoAction) {
+ flushLazyAction();
+ const undoSet = new Set(undoActionStack.value);
+
+ if (!undoSet.has(action)) {
+ throw new ActionOutOfBoundsError(action, "undo");
+ }
+
+ while (nextRedoAction.value !== action) {
+ undo();
+ }
+ }
+
+ function rollForwardTo(action: UndoRedoAction) {
+ flushLazyAction();
+ const redoSet = new Set(redoActionStack.value);
+
+ if (!redoSet.has(action)) {
+ throw new ActionOutOfBoundsError(action, "redo");
+ }
+
+ while (nextUndoAction.value !== action) {
+ redo();
+ }
+ }
+
return {
undoActionStack,
redoActionStack,
+ minUndoActions,
maxUndoActions,
+ savedUndoActions,
+ deletedActions,
undo,
redo,
applyAction,
@@ -162,6 +214,8 @@ export const useUndoRedoStore = defineScopedStore("undoRedoStore", () => {
hasUndo,
hasRedo,
$reset,
+ rollBackTo,
+ rollForwardTo,
};
});
diff --git a/client/src/stores/undoRedoStore/undoRedoAction.ts b/client/src/stores/undoRedoStore/undoRedoAction.ts
index 63a54f5e4ff4..88a42a5a0971 100644
--- a/client/src/stores/undoRedoStore/undoRedoAction.ts
+++ b/client/src/stores/undoRedoStore/undoRedoAction.ts
@@ -1,5 +1,12 @@
+let idCounter = 0;
+
export class UndoRedoAction {
protected internalName?: string;
+ public id: number;
+
+ constructor() {
+ this.id = idCounter++;
+ }
get name(): string | undefined {
return this.internalName;
diff --git a/client/src/stores/workflowEditorCommentStore.ts b/client/src/stores/workflowEditorCommentStore.ts
index 3a4ea5301fd6..d3a6c7e1993c 100644
--- a/client/src/stores/workflowEditorCommentStore.ts
+++ b/client/src/stores/workflowEditorCommentStore.ts
@@ -69,6 +69,8 @@ export type WorkflowComment =
| MarkdownWorkflowComment
| FreehandWorkflowComment;
+export type WorkflowCommentType = WorkflowComment["type"];
+
interface CommentsMetadata {
justCreated?: boolean;
multiSelected?: boolean;