Ensure only one editor is open at a time
Also binds the open editor to the focused note more closely: The note associated with the editor must be focused, and focusing a different note closes the editor again.
This commit is contained in:
parent
fbb808c69f
commit
e3e35f54b3
1 changed files with 17 additions and 11 deletions
|
|
@ -38,15 +38,17 @@ const children = computed(() => {
|
||||||
return children;
|
return children;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const hovering = ref(false);
|
||||||
|
const mode = ref<"editing" | "creating">();
|
||||||
|
|
||||||
const mayOpen = computed(() => children.value.length > 0);
|
const mayOpen = computed(() => children.value.length > 0);
|
||||||
const open = computed(() => mayOpen.value && ui.openPaths.has(props.path));
|
const open = computed(() => mayOpen.value && ui.openPaths.has(props.path));
|
||||||
|
|
||||||
const focused = computed(() => ui.focusPath === props.path);
|
const focused = computed(() => ui.focusPath === props.path);
|
||||||
const hover = computed(() => hovering.value && !editing.value);
|
const hover = computed(() => hovering.value && mode.value !== "editing");
|
||||||
|
|
||||||
const hovering = ref(false);
|
const creating = computed(() => mode.value === "creating");
|
||||||
const editing = ref(false);
|
const editing = computed(() => mode.value === "editing");
|
||||||
const creating = ref(false);
|
|
||||||
|
|
||||||
// Ensure we're open if we need to be.
|
// Ensure we're open if we need to be.
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
|
|
@ -57,9 +59,14 @@ watchEffect(() => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Abort creating whenever we stop being focused.
|
// Ensure only one editor is ever open.
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
if (!focused.value) creating.value = false;
|
if (!focused.value) mode.value = undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ensure we're focused when an editor is open.
|
||||||
|
watchEffect(() => {
|
||||||
|
if (mode.value) focusOnThis();
|
||||||
});
|
});
|
||||||
|
|
||||||
function focusOnThis() {
|
function focusOnThis() {
|
||||||
|
|
@ -84,12 +91,11 @@ function onClick() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEditButtonClick() {
|
function onEditButtonClick() {
|
||||||
focusOnThis();
|
mode.value = "editing";
|
||||||
editing.value = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEditEditorClose() {
|
function onEditEditorClose() {
|
||||||
editing.value = false;
|
mode.value = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEditEditorFinish(text: string) {
|
function onEditEditorFinish(text: string) {
|
||||||
|
|
@ -98,11 +104,11 @@ function onEditEditorFinish(text: string) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCreateButtonClick() {
|
function onCreateButtonClick() {
|
||||||
creating.value = true;
|
mode.value = "creating";
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCreateEditorClose() {
|
function onCreateEditorClose() {
|
||||||
creating.value = false;
|
mode.value = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCreateEditorFinish(text: string) {
|
function onCreateEditorFinish(text: string) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue