Doc editor and code editor are toggleable docks

app/gui2/e2e/actions.ts

@@ -12,11 +12,14 @@ export async function goToGraph(page: Page, closeDocPanel: boolean = true) {
   await page.goto('/')
   // Initial load through vite can take a while. Make sure that the first locator has enough time.
   await expect(page.locator('.GraphEditor')).toBeVisible({ timeout: 100000 })
-  if (closeDocPanel) {
-    await page.locator('.rightDock > .closeButton').click()
-  }
   // Wait until nodes are loaded.
   await expect(locate.graphNode(page)).toExist()
+  if (closeDocPanel) {
+    await expect(page.getByTestId('rightDock')).toExist()
+    await page.getByRole('button', { name: 'Documentation Panel' }).click()
+    // Wait for the closing animation.
+    await expect(page.getByTestId('rightDock')).not.toBeVisible()
+  }
   // Wait for position initialization
   await expectNodePositionsInitialized(page, 72)
 }
@@ -46,7 +49,7 @@ export async function exitFunction(page: Page, x = 300, y = 300) {
 /// Move node defined by the given binding  by the given x and y.
 export async function dragNodeByBinding(page: Page, nodeBinding: string, x: number, y: number) {
   const node = graphNodeByBinding(page, nodeBinding)
-  const grabHandle = await node.locator('.grab-handle')
+  const grabHandle = node.locator('.grab-handle')
   await grabHandle.dragTo(grabHandle, {
     targetPosition: { x, y },
     force: true,

app/gui2/src/App.vue

@@ -101,6 +101,6 @@ registerAutoBlurHandler()
 
 .enso-dashboard .App {
   /* Compensate for top bar, render the app below it. */
-  margin-top: calc(0px - var(--row-height) - var(--top-level-gap) - var(--top-bar-margin));
+  top: calc(var(--row-height) + var(--top-level-gap, 0px) + var(--top-bar-margin, 0px) + 16px);
 }
 </style>

app/gui2/src/assets/base.css

@@ -58,6 +58,7 @@
   --visualization-resize-handle-inside: 3px;
   --visualization-resize-handle-outside: 3px;
   --right-dock-default-width: 40%;
+  --code-editor-default-height: 30%;
 }
 
 *,

app/gui2/src/components/BottomPanel.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { codeEditorBindings } from '@/bindings'
+import ResizeHandles from '@/components/ResizeHandles.vue'
+import ToggleIcon from '@/components/ToggleIcon.vue'
+import { useResizeObserver } from '@/composables/events'
+import { Rect } from '@/util/data/rect'
+import { Vec2 } from '@/util/data/vec2'
+import { useLocalStorage } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const MIN_DOCK_SIZE_PX = 20
+
+const rootElement = ref<HTMLElement>()
+
+const show = defineModel<boolean>('show', { required: true })
+
+const savedSize = useLocalStorage<{ height: number | null }>('code-editor-size', { height: null })
+
+const computedSize = useResizeObserver(rootElement)
+const computedBounds = computed(() => new Rect(Vec2.Zero, computedSize.value))
+
+function clampSize(size: number) {
+  return Math.max(size, MIN_DOCK_SIZE_PX)
+}
+
+const style = computed(() =>
+  savedSize.value?.height != null ?
+    { '--panel-size': `${clampSize(savedSize.value.height)}px` }
+  : undefined,
+)
+</script>
+
+<template>
+  <ToggleIcon
+    v-model="show"
+    :title="`Code Editor (${codeEditorBindings.bindings.toggle.humanReadable})`"
+    icon="bottom_panel"
+    class="toggleDock"
+  />
+  <Transition>
+    <div v-if="show" ref="rootElement" class="BottomPanel dock" :style="style">
+      <slot />
+      <ResizeHandles
+        top
+        :modelValue="computedBounds"
+        @update:modelValue="savedSize = { height: $event.height }"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.BottomPanel {
+  --panel-size: var(--code-editor-default-height);
+  position: relative;
+  bottom: 0;
+  height: var(--panel-size);
+  margin-right: 1px;
+  backdrop-filter: var(--blur-app-bg);
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+}
+.v-enter-active,
+.v-leave-active {
+  transition: height 0.1s ease;
+}
+.v-enter-from,
+.v-leave-to {
+  height: 0;
+}
+
+.toggleDock {
+  z-index: 1;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+}
+</style>

app/gui2/src/components/CodeEditor.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import type { ChangeSet, Diagnostic, Highlighter } from '@/components/CodeEditor/codemirror'
-import SvgButton from '@/components/SvgButton.vue'
-import { usePointer } from '@/composables/events'
 import { useGraphStore, type NodeId } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { useAutoBlur } from '@/util/autoBlur'
 import { chain } from '@/util/data/iterable'
 import { unwrap } from '@/util/data/result'
 import { qnJoin, tryQualifiedName } from '@/util/qualifiedName'
-import { useLocalStorage } from '@vueuse/core'
 import { createDebouncer } from 'lib0/eventloop'
 import { MutableModule } from 'shared/ast'
 import { textChangeToEdits, type SourceRangeEdit } from 'shared/util/data/text'
@@ -39,8 +36,6 @@ const {
   textEditToChangeSpec,
 } = await import('@/components/CodeEditor/codemirror')
 
-const emit = defineEmits<{ close: [] }>()
-
 const projectStore = useProjectStore()
 const graphStore = useGraphStore()
 const suggestionDbStore = useSuggestionDbStore()
@@ -299,38 +294,12 @@ onMounted(() => {
   editorView.focus()
   rootElement.value?.prepend(editorView.dom)
 })
-
-const editorSize = useLocalStorage<{ width: number | null; height: number | null }>(
-  'code-editor-size',
-  { width: null, height: null },
-)
-
-let initSize = { width: 0, height: 0 }
-const resize = usePointer((pos, _, type) => {
-  if (rootElement.value == null) return
-  if (type == 'start') initSize = rootElement.value.getBoundingClientRect()
-  editorSize.value.width = initSize.width + pos.relative.x
-  editorSize.value.height = initSize.height - pos.relative.y
-})
-
-function resetSize() {
-  editorSize.value.width = null
-  editorSize.value.height = null
-}
-
-const editorStyle = computed(() => {
-  return {
-    width: editorSize.value.width ? `${editorSize.value.width}px` : '50%',
-    height: editorSize.value.height ? `${editorSize.value.height}px` : '30%',
-  }
-})
 </script>
 
 <template>
   <div
     ref="rootElement"
     class="CodeEditor"
-    :style="editorStyle"
     @keydown.arrow-left.stop
     @keydown.arrow-right.stop
     @keydown.arrow-up.stop
@@ -340,95 +309,26 @@ const editorStyle = computed(() => {
     @keydown.delete.stop
     @wheel.stop.passive
     @contextmenu.stop
-  >
-    <div class="resize-handle" v-on="resize.events" @dblclick="resetSize">
-      <svg viewBox="0 0 16 16">
-        <circle cx="2" cy="2" r="1.5" />
-        <circle cx="8" cy="2" r="1.5" />
-        <circle cx="8" cy="8" r="1.5" />
-        <circle cx="14" cy="2" r="1.5" />
-        <circle cx="14" cy="8" r="1.5" />
-        <circle cx="14" cy="14" r="1.5" />
-      </svg>
-    </div>
-    <SvgButton name="close" class="closeButton" title="Close Code Editor" @click="emit('close')" />
-  </div>
+  ></div>
 </template>
 
 <style scoped>
 .CodeEditor {
-  position: absolute;
-  bottom: 5px;
-  left: 5px;
-  width: 50%;
-  height: 30%;
-  max-width: calc(100% - 10px);
-  max-height: calc(100% - 10px);
-  backdrop-filter: var(--blur-app-bg);
-  border-radius: 7px;
+  width: 100%;
+  height: 100%;
   font-family: var(--font-mono);
-
-  &.v-enter-active,
-  &.v-leave-active {
-    transition:
-      transform 0.2s ease,
-      opacity 0.2s ease;
-  }
-
-  &.v-enter-from,
-  &.v-leave-to {
-    transform: scale(95%);
-    opacity: 0;
-  }
 }
 
 :deep(.ͼ1 .cm-scroller) {
   font-family: var(--font-mono);
-}
-
-.resize-handle {
-  position: absolute;
-  top: -3px;
-  right: -3px;
-  width: 20px;
-  height: 20px;
-  padding: 5px;
-  cursor: nesw-resize;
-
-  svg {
-    fill: black;
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-    transition: opacity 0.1s ease-in-out;
-  }
-
-  &:hover svg {
-    opacity: 0.9;
-  }
-}
-
-.closeButton {
-  position: absolute;
-  top: 4px;
-  left: 6px;
-  color: red;
-  opacity: 0.3;
-
-  &:hover {
-    opacity: 0.6;
-  }
+  /* Prevent touchpad back gesture, which can be triggered while panning. */
+  overscroll-behavior: none;
 }
 
 .CodeEditor :deep(.cm-editor) {
   position: relative;
-  color: white;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.4);
-  border-radius: 5px;
   opacity: 1;
   color: black;
   text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
@@ -457,5 +357,6 @@ const editorStyle = computed(() => {
 
 .CodeEditor :deep(.cm-gutters) {
   border-radius: 3px 0 0 3px;
+  min-width: 32px;
 }
 </style>