fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 07:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Redesign how the control bar handles fill and stroke colors (#4137)

Browse Source 
* Revamp how the control bar handles fill and stroke colors

* Fix bugs

* Code review
This commit is contained in:
Keavon Chambers
2026-05-11 18:13:02 -07:00
committed by GitHub
parent f6def3b911
commit 629a1f4b4c
25 changed files with 1355 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/inputs/NumberInput.svelte
+28 -2
View File
@@ -12,7 +12,7 @@
const BUTTON_LEFT = 0;
const BUTTON_RIGHT = 2;
const dispatch = createEventDispatcher<{ value: number | undefined; startHistoryTransaction: undefined }>();
const dispatch = createEventDispatcher<{ value: number | undefined; startHistoryTransaction: undefined; commitHistoryTransaction: undefined }>();
const editor = getContext<EditorWrapper>("editor");
@@ -84,6 +84,9 @@
let shiftKeyDown = false;
// Track whether the Ctrl key is currently held down.
let ctrlKeyDown = false;
// True between dispatching `startHistoryTransaction` and the matching `commitHistoryTransaction`, so we only commit
// when this widget actually opened a transaction (skipping clicks-without-drag and aborts-before-drag-started).
let transactionInProgress = false;
// Cleanup function for active drag interactions, called on destroy to prevent leaked listeners
let activeDragCleanup: (() => void) | undefined;
// Track the slider abort state for cleanup on destroy
@@ -135,8 +138,17 @@
removeEventListener("keydown", sliderAbortFromDragging);
removeEventListener("keydown", incrementPressAbort);
if (sliderResetAbortHandler) removeEventListener("pointerup", sliderResetAbortHandler);
commitTransactionIfInProgress();
});
function commitTransactionIfInProgress() {
if (transactionInProgress) {
dispatch("commitHistoryTransaction");
transactionInProgress = false;
}
}
// ===============================
// TRACKING AND UPDATING THE VALUE
// ===============================
@@ -243,9 +255,13 @@
if (newValue !== undefined) {
const oldValue = value !== undefined && isInteger ? Math.round(value) : value;
if (newValue !== oldValue) dispatch("startHistoryTransaction");
if (newValue !== oldValue) {
dispatch("startHistoryTransaction");
transactionInProgress = true;
}
}
updateValue(newValue);
commitTransactionIfInProgress();
editing = false;
self?.unFocus();
@@ -477,6 +493,9 @@
// Clean up the event listeners.
activeDragCleanup?.();
// Close out the transaction `startDragging` opened so the many emits collapse into one history step (covers both confirmed and aborted drags).
commitTransactionIfInProgress();
};
addEventListener("pointerup", pointerUp);
@@ -626,12 +645,17 @@
removeEventListener("keydown", sliderAbortFromMousedown);
removeEventListener("pointermove", sliderAbortFromDragging);
removeEventListener("keydown", sliderAbortFromDragging);
// Close out the transaction `startDragging` opened, so the drag's many emits collapse into one history step.
// Covers the abort path too (sliderAbort already restored the original value, so the committed step is a no-op).
commitTransactionIfInProgress();
}
function startDragging() {
// This event is sent to the backend so it knows to start a transaction for the history system. See discussion for some explanation:
// <https://github.com/GraphiteEditor/Graphite/pull/1584#discussion_r1477592483>
dispatch("startHistoryTransaction");
transactionInProgress = true;
}
// We want to let the user abort while dragging the slider by right clicking or pressing Escape.
@@ -663,6 +687,8 @@
// dragging the slider, now that we're no longer dragging it due to the loss of window focus.
removeEventListener("pointermove", sliderAbortFromDragging);
removeEventListener("keydown", sliderAbortFromDragging);
commitTransactionIfInProgress();
}
}