Merge branch 'develop' into wip/sergeigarin/hide-discovery-button

CHANGELOG.md

@@ -9,12 +9,15 @@
 - [Quick Fix Import Button][12051].
 - [Fixed nodes being selected after deleting other nodes or connections.][11902]
 - [Redo stack is no longer lost when interacting with text literals][11908].
+- [Fixed bug when clicking header in Table Editor Widget didn't start editing
+  it][12064]
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
 [12051]: https://github.com/enso-org/enso/pull/12051
 [11902]: https://github.com/enso-org/enso/pull/11902
 [11908]: https://github.com/enso-org/enso/pull/11908
+[12064]: https://github.com/enso-org/enso/pull/12064
 
 #### Enso Standard Library
 

app/common/src/utilities/data/object.ts

@@ -193,27 +193,6 @@ export type ExtractKeys<T, U> = {
 /** An instance method of the given type. */
 export type MethodOf<T> = (this: T, ...args: never) => unknown
 
-// ===================
-// === useObjectId ===
-// ===================
-
-/** Composable providing support for managing object identities. */
-export function useObjectId() {
-  let lastId = 0
-  const idNumbers = new WeakMap<object, number>()
-  /** @returns A value that can be used to compare object identity. */
-  function objectId(o: object): number {
-    const id = idNumbers.get(o)
-    if (id == null) {
-      lastId += 1
-      idNumbers.set(o, lastId)
-      return lastId
-    }
-    return id
-  }
-  return { objectId }
-}
-
 /**
  * Returns the union of `A` and `B`, with a type-level assertion that `A` and `B` don't have any keys in common; this
  * can be used to splice together objects without the risk of collisions.

app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue

@@ -4,7 +4,7 @@ import { ensoSyntax } from '@/components/CodeEditor/ensoSyntax'
 import { useEnsoSourceSync } from '@/components/CodeEditor/sync'
 import { ensoHoverTooltip } from '@/components/CodeEditor/tooltips'
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
-import VueComponentHost from '@/components/VueComponentHost.vue'
+import VueHostRender, { VueHost } from '@/components/VueHostRender.vue'
 import { useGraphStore } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
@@ -31,8 +31,6 @@ const projectStore = useProjectStore()
 const graphStore = useGraphStore()
 const suggestionDbStore = useSuggestionDbStore()
 
-const vueComponentHost =
-  useTemplateRef<ComponentInstance<typeof VueComponentHost>>('vueComponentHost')
 const editorRoot = useTemplateRef<ComponentInstance<typeof CodeMirrorRoot>>('editorRoot')
 const rootElement = computed(() => editorRoot.value?.rootElement)
 useAutoBlur(rootElement)
@@ -42,7 +40,7 @@ const autoindentOnEnter = {
   run: insertNewlineKeepIndent,
 }
 
-const vueHost = computed(() => vueComponentHost.value || undefined)
+const vueHost = new VueHost()
 const { editorView, setExtraExtensions } = useCodeMirror(editorRoot, {
   extensions: [
     keymap.of([indentWithTab, autoindentOnEnter]),
@@ -55,7 +53,7 @@ const { editorView, setExtraExtensions } = useCodeMirror(editorRoot, {
     highlightStyle(useCssModule()),
     ensoHoverTooltip(graphStore, suggestionDbStore, vueHost),
   ],
-  vueHost,
+  vueHost: () => vueHost,
 })
 ;(window as any).__codeEditorApi = testSupport(editorView)
 const { updateListener, connectModuleListener } = useEnsoSourceSync(
@@ -74,7 +72,7 @@ onMounted(() => {
 
 <template>
   <CodeMirrorRoot ref="editorRoot" class="CodeEditor" @keydown.tab.stop.prevent />
-  <VueComponentHost ref="vueComponentHost" />
+  <VueHostRender :host="vueHost" />
 </template>
 
 <style scoped>

app/gui/src/project-view/components/CodeEditor/tooltips.ts

@@ -1,6 +1,6 @@
 import CodeEditorTooltip from '@/components/CodeEditor/CodeEditorTooltip.vue'
 import { astProp } from '@/components/CodeEditor/ensoSyntax'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { type GraphStore } from '@/stores/graph'
 import { type SuggestionDbStore } from '@/stores/suggestionDatabase'
 import { Ast } from '@/util/ast'

app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { WidgetInputIsSpecificMethodCall } from '@/components/GraphEditor/widgets/WidgetFunction.vue'
-import TableHeader from '@/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue'
 import {
   CELLS_LIMIT,
   tableInputCallMayBeHandled,
@@ -10,11 +9,11 @@ import {
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import AgGridTableView from '@/components/shared/AgGridTableView.vue'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
-import { useTooltipRegistry } from '@/providers/tooltipRegistry'
-import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
+import { defineWidget, Score, widgetProps } from '@/providers/widgetRegistry'
 import { WidgetEditHandler } from '@/providers/widgetRegistry/editHandler'
 import { useGraphStore } from '@/stores/graph'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { targetIsOutside } from '@/util/autoBlur'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { useToast } from '@/util/toast'
@@ -29,17 +28,23 @@ import type {
   ProcessDataFromClipboardParams,
   RowDragEndEvent,
 } from 'ag-grid-enterprise'
-import { computed, markRaw, ref } from 'vue'
+import { ComponentInstance, computed, proxyRefs, ref } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { z } from 'zod'
+import TableHeader, { HeaderParams } from './WidgetTableEditor/TableHeader.vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
 const graph = useGraphStore()
 const suggestionDb = useSuggestionDbStore()
-const grid = ref<ComponentExposed<typeof AgGridTableView<RowData, any>>>()
+const grid = ref<
+  ComponentInstance<typeof AgGridTableView<RowData, any>> &
+    ComponentExposed<typeof AgGridTableView<RowData, any>>
+>()
 const pasteWarning = useToast.warning()
 
-const configSchema = z.object({ size: z.object({ x: z.number(), y: z.number() }) })
+const configSchema = z.object({
+  size: z.object({ x: z.number(), y: z.number() }),
+})
 type Config = z.infer<typeof configSchema>
 
 const DEFAULT_CFG: Config = { size: { x: 200, y: 150 } }
@@ -115,34 +120,48 @@ const cellEditHandler = new CellEditing()
 
 class HeaderEditing {
   handler: WidgetEditHandler
-  stopEditingCallback: ((cancel: boolean) => void) | undefined
+  editedColId = ref<string>()
+  revertChangesCallback: (() => void) | undefined
 
   constructor() {
     this.handler = WidgetEditHandler.New('WidgetTableEditor.headerEditHandler', props.input, {
       cancel: () => {
-        this.stopEditingCallback?.(true)
+        this.revertChangesCallback?.()
+        this.editedColId.value = undefined
       },
       end: () => {
-        this.stopEditingCallback?.(false)
+        this.editedColId.value = undefined
+      },
+      pointerdown: (event) => {
+        if (
+          !(event.target instanceof HTMLInputElement) ||
+          targetIsOutside(event, grid.value?.$el)
+        ) {
+          this.handler.end()
+        } else {
+          return false
+        }
       },
     })
   }
 
-  headerEditedInGrid(stopCb: (cancel: boolean) => void) {
-    // If another header is edited, stop it (with the old callback).
-    if (this.handler.isActive()) {
-      this.stopEditingCallback?.(false)
-    }
-    this.stopEditingCallback = stopCb
-    if (!this.handler.isActive()) {
-      this.handler.start()
+  headerEditedInGrid(colId: string, revertChanges: () => void) {
+    if (this.editedColId.value !== colId) {
+      this.editedColId.value = colId
+      if (!this.handler.isActive()) {
+        this.handler.start()
+      }
     }
+    this.revertChangesCallback = revertChanges
   }
 
-  headerEditingStoppedInGrid() {
-    this.stopEditingCallback = undefined
-    if (this.handler.isActive()) {
-      this.handler.end()
+  headerEditingStoppedInGrid(colId: string) {
+    if (this.editedColId.value === colId) {
+      this.revertChangesCallback = undefined
+      this.editedColId.value = undefined
+      if (this.handler.isActive()) {
+        this.handler.end()
+      }
     }
   }
 }
@@ -164,7 +183,12 @@ const clientBounds = computed({
       portUpdate: {
         origin: props.input.portId,
         metadataKey: 'WidgetTableEditor',
-        metadata: { size: { x: value.width / graphNav.scale, y: value.height / graphNav.scale } },
+        metadata: {
+          size: {
+            x: value.width / graphNav.scale,
+            y: value.height / graphNav.scale,
+          },
+        },
       },
       directInteraction: false,
     })
@@ -211,23 +235,21 @@ function processDataFromClipboard({ data, api }: ProcessDataFromClipboardParams<
 
 // === Column Default Definition ===
 
-const tooltipRegistry = useTooltipRegistry()
-const defaultColDef: ColDef<RowData> = {
+const headerComponentParams = proxyRefs({
+  editedColId: headerEditHandler.editedColId,
+  onHeaderEditingStarted: headerEditHandler.headerEditedInGrid.bind(headerEditHandler),
+  onHeaderEditingStopped: headerEditHandler.headerEditingStoppedInGrid.bind(headerEditHandler),
+})
+
+const defaultColDef: ColDef<RowData> & {
+  headerComponentParams: HeaderParams
+} = {
   editable: true,
   resizable: true,
   sortable: false,
   lockPinned: true,
   menuTabs: ['generalMenuTab'],
-  headerComponentParams: {
-    // TODO[ao]: we mark raw, because otherwise any change _inside_ tooltipRegistry causes the grid
-    //  to be refreshed. Technically, shallowReactive should work here, but it does not,
-    //  I don't know why
-    tooltipRegistry: markRaw(tooltipRegistry),
-    editHandlers: {
-      onHeaderEditingStarted: headerEditHandler.headerEditedInGrid.bind(headerEditHandler),
-      onHeaderEditingStopped: headerEditHandler.headerEditingStoppedInGrid.bind(headerEditHandler),
-    },
-  },
+  headerComponentParams,
   cellStyle: { 'padding-left': 0, 'border-right': '1px solid #C0C0C0' },
 }
 </script>
@@ -260,7 +282,9 @@ export const widgetDefinition = defineWidget(
         :columnDefs="columnDefs"
         :rowData="rowData"
         :getRowId="(row) => `${row.data.index}`"
-        :components="{ agColumnHeader: TableHeader }"
+        :components="{
+          agColumnHeader: TableHeader,
+        }"
         :stopEditingWhenCellsLoseFocus="true"
         :suppressDragLeaveHidesColumns="true"
         :suppressMoveWhenColumnDragging="true"