From 6c14688ee4cbb42d9cfa7d4c891541888ffbf5a1 Mon Sep 17 00:00:00 2001 From: Ilya Bogdanov Date: Wed, 6 Dec 2023 16:14:15 +0400 Subject: [PATCH 1/5] Fix dynamic dropdowns --- .../src/components/GraphEditor/widgets/WidgetFunction.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue index 7175edae6dcc..69f9bfc68a56 100644 --- a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue +++ b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue @@ -88,8 +88,8 @@ const visualizationConfig = computed>(() => const visualizationData = project.useVisualizationData(visualizationConfig) const widgetConfiguration = computed(() => { const data = visualizationData.value - if (data != null) { - const parseResult = widgetConfigurationSchema.safeParse(data) + if (data != null && data.ok) { + const parseResult = widgetConfigurationSchema.safeParse(data.value) if (parseResult.success) { return parseResult.data } else { From 7d32bbfb7ee7af3d5214ba31693f7c1b5e29705a Mon Sep 17 00:00:00 2001 From: Ilya Bogdanov Date: Wed, 6 Dec 2023 17:15:07 +0400 Subject: [PATCH 2/5] Adjust style of dropdown widget to match the design --- .../GraphEditor/widgets/WidgetSelection.vue | 6 +++++- app/gui2/src/components/widgets/DropdownWidget.vue | 13 +++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue index a7c51023b87b..d921b9d91c93 100644 --- a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue +++ b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue @@ -72,6 +72,10 @@ const selectedValue = computed(() => { if (selectedIndex.value == null) return props.input.info?.defaultValue ?? '' return tagValues.value[selectedIndex.value] ?? '' }) +const selectedLabel = computed(() => { + if (selectedIndex.value == null) return props.input.info?.defaultValue ?? '' + return tagLabels.value[selectedIndex.value] ?? '' +}) const showDropdownWidget = ref(false) const showArgumentValue = ref(true) @@ -114,7 +118,7 @@ export const widgetDefinition = defineWidget([ArgumentPlaceholder, ArgumentAst], v-if="showDropdownWidget" :color="parentColor ?? 'white'" :values="tagLabels" - :selectedValue="selectedValue" + :selectedValue="selectedLabel" @click="selectedIndex = $event" /> diff --git a/app/gui2/src/components/widgets/DropdownWidget.vue b/app/gui2/src/components/widgets/DropdownWidget.vue index 6501debafe2f..f7c29a8a57e7 100644 --- a/app/gui2/src/components/widgets/DropdownWidget.vue +++ b/app/gui2/src/components/widgets/DropdownWidget.vue @@ -90,6 +90,19 @@ const NEXT_SORT_DIRECTION: Record = { padding: 4px 0; } +li { + text-align: left; + transition: transform 0.2s ease; +} + +.selectable-item:hover { + transform: translateX(8px); +} + +.list span { + vertical-align: text-bottom; +} + .list::-webkit-scrollbar { -webkit-appearance: none; width: 8px; From 30087f86876a88ea8b1af770833cb705740e4c77 Mon Sep 17 00:00:00 2001 From: Ilya Bogdanov Date: Wed, 6 Dec 2023 17:33:56 +0400 Subject: [PATCH 3/5] Fix node delete shortcut on MacOS --- app/gui2/src/bindings.ts | 2 +- app/gui2/src/util/shortcuts.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/gui2/src/bindings.ts b/app/gui2/src/bindings.ts index 59b9d0546793..f38f81871afe 100644 --- a/app/gui2/src/bindings.ts +++ b/app/gui2/src/bindings.ts @@ -25,7 +25,7 @@ export const graphBindings = defineKeybinds('graph-editor', { openComponentBrowser: ['Enter'], newNode: ['N'], toggleVisualization: ['Space'], - deleteSelected: ['Delete'], + deleteSelected: ['OsDelete'], zoomToSelected: ['Mod+Shift+A'], selectAll: ['Mod+A'], deselectAll: ['Escape', 'PointerMain'], diff --git a/app/gui2/src/util/shortcuts.ts b/app/gui2/src/util/shortcuts.ts index a70da71bccf1..a703575a0e5c 100644 --- a/app/gui2/src/util/shortcuts.ts +++ b/app/gui2/src/util/shortcuts.ts @@ -182,7 +182,7 @@ const normalizedKeyboardSegmentLookup = Object.fromEntries( ) normalizedKeyboardSegmentLookup[''] = '+' normalizedKeyboardSegmentLookup['space'] = ' ' -normalizedKeyboardSegmentLookup['osdelete'] = isMacLike ? 'Delete' : 'Backspace' +normalizedKeyboardSegmentLookup['osdelete'] = isMacLike ? 'Backspace' : 'Delete' type NormalizeKeybindSegment = { [K in KeybindSegment as Lowercase]: K } From dd4795cdd7e94b4fc3e4f56171e57e6ecf158e67 Mon Sep 17 00:00:00 2001 From: Ilya Bogdanov Date: Wed, 6 Dec 2023 18:21:49 +0400 Subject: [PATCH 4/5] Fix layout of vector editor --- app/gui2/src/components/widgets/ListWidget.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/gui2/src/components/widgets/ListWidget.vue b/app/gui2/src/components/widgets/ListWidget.vue index 53508b78ffd0..1904c49643a2 100644 --- a/app/gui2/src/components/widgets/ListWidget.vue +++ b/app/gui2/src/components/widgets/ListWidget.vue @@ -459,6 +459,10 @@ watchPostEffect(() => { } } +div { + display: inline-block; +} + .vector-literal { display: flex; align-items: center; From c9a30a3f207ba84ec779966ca67aed70029d7de5 Mon Sep 17 00:00:00 2001 From: Ilya Bogdanov Date: Wed, 6 Dec 2023 18:31:40 +0400 Subject: [PATCH 5/5] Stop backspace key propagation for input fields --- app/gui2/src/components/CodeEditor.vue | 1 + app/gui2/src/components/ComponentBrowser.vue | 1 + 2 files changed, 2 insertions(+) diff --git a/app/gui2/src/components/CodeEditor.vue b/app/gui2/src/components/CodeEditor.vue index d0af50b8505f..ca0288868fb3 100644 --- a/app/gui2/src/components/CodeEditor.vue +++ b/app/gui2/src/components/CodeEditor.vue @@ -201,6 +201,7 @@ const editorStyle = computed(() => { class="CodeEditor" :style="editorStyle" @keydown.enter.stop + @keydown.backspace.stop @wheel.stop.passive @pointerdown.stop @contextmenu.stop diff --git a/app/gui2/src/components/ComponentBrowser.vue b/app/gui2/src/components/ComponentBrowser.vue index 459fce15d46a..184203c17fb6 100644 --- a/app/gui2/src/components/ComponentBrowser.vue +++ b/app/gui2/src/components/ComponentBrowser.vue @@ -490,6 +490,7 @@ const handler = componentBrowserBindings.handler({ v-model="input.code.value" name="cb-input" autocomplete="off" + @keydown.backspace.stop @keyup="readInputFieldSelection" />