Place dropdown arrow under autoscoped identifier (#9945)

Place arrows below autoscoped identifier, also fixes issue with CSS.
enso-org · May 14, 2024 · cc8e5ae · cc8e5ae
1 parent 9faa182
commit cc8e5ae
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/app/gui2/shared/ast/tree.ts b/app/gui2/shared/ast/tree.ts
@@ -798,6 +798,10 @@ export class AutoscopedIdentifier extends Ast {
     super(module, fields)
   }
 
+  get identifier(): Token {
+    return this.module.getToken(this.fields.get('identifier').node)
+  }
+
   static tryParse(
     source: string,
     module?: MutableModule,

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
@@ -210,6 +210,7 @@ provideSelectionArrow(
       // It will be used to place the dropdown arrow under the constructor name.
       let node = props.input.value
       while (node instanceof Ast.Ast) {
+        if (node instanceof Ast.AutoscopedIdentifier) return node.identifier.id
         if (node instanceof Ast.PropertyAccess) return node.rhs.id
         if (node instanceof Ast.App) node = node.function
         else break
@@ -404,7 +405,7 @@ declare module '@/providers/widgetRegistry' {
   flex-direction: row;
   align-items: center;
   position: relative;
-  min-height: --node-port-height;
+  min-height: var(--node-port-height);
 }
 
 .arrow {

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelectionArrow.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelectionArrow.vue
@@ -24,17 +24,15 @@ onUnmounted(() => info && (info.handled = false))
 
 <script lang="ts">
 export const widgetDefinition = defineWidget(
-  WidgetInput.isAstOrPlaceholder,
+  [WidgetInput.isAstOrPlaceholder, WidgetInput.isToken],
   {
     priority: 105,
     score: (props) => {
       const info = injectSelectionArrow(true)
       if (info == null) return Score.Mismatch
 
-      // This is needed because the id of the rhs in PropertyAccess chain is TokenId, not AstId.
-      if (props.input.value instanceof Ast.Ident && props.input.value.token.id === info?.id)
+      if (props.input.value instanceof Ast.Token && props.input.value.id === info?.id)
         return Score.Perfect
-
       if (props.input.value instanceof Ast.Ast && props.input.value.id === info?.id)
         return Score.Perfect
       if (props.input.portId === info?.id) return Score.Perfect
@@ -63,6 +61,6 @@ export const widgetDefinition = defineWidget(
   display: flex;
   flex-direction: row;
   align-items: center;
-  min-height: --node-port-height;
+  min-height: var(--node-port-height);
 }
 </style>