fix: refine marker style

CyanSalt · Mar 21, 2024 · a8efa2b · a8efa2b
1 parent c04ce6a
commit a8efa2b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/src/renderer/components/TerminalTeletype.vue b/src/renderer/components/TerminalTeletype.vue
@@ -58,9 +58,14 @@ function fit() {
 
 const observer = new ResizeObserver(fit)
 
-const cell = $computed(() => {
-  const xterm = tab.xterm
-  return xterm['_core']._renderService.dimensions.css.cell
+let cell = $ref<{ width: number, height: number }>()
+
+const variables = $computed(() => {
+  if (!cell) return {}
+  return {
+    '--cell-width': `${cell.width}px`,
+    '--cell-height': `${cell.height}px`,
+  }
 })
 
 watchEffect((onInvalidate) => {
@@ -69,9 +74,7 @@ watchEffect((onInvalidate) => {
   const xterm = tab.xterm
   if (xterm.element) return
   xterm.open(el)
-  // Add cell size properties
-  el.style.setProperty('--cell-width', `${cell.width}px`)
-  el.style.setProperty('--cell-height', `${cell.height}px`)
+  cell = xterm['_core']._renderService.dimensions.css.cell
   tab.deferred.open.resolve()
   xterm.focus()
   observer.observe(el)
@@ -89,6 +92,7 @@ const renderableCompletion = $computed(() => {
 })
 
 const selectedCompletion = $computed(() => {
+  if (!renderableCompletion) return undefined
   return renderableCompletion.items[renderableCompletion.index]
 })
 
@@ -111,7 +115,7 @@ function getCompletionIcon(item: CommandCompletion) {
 }
 
 function selectCompletion(event: MouseEvent, item: CommandCompletion) {
-  const index = renderableCompletion.items
+  const index = renderableCompletion!.items
     .findIndex(completion => completion.value === item.value)
   if (index === -1) return
   if (isMatchLinkModifier(event)) {
@@ -127,8 +131,8 @@ onBeforeUpdate(() => {
 })
 
 function mountCompletion(el: HTMLElement, item: CommandCompletion) {
-  if (!renderableCompletion.mounted.has(item.value)) {
-    renderableCompletion.mounted.set(item.value, el)
+  if (!renderableCompletion!.mounted.has(item.value)) {
+    renderableCompletion!.mounted.set(item.value, el)
   }
 }
 </script>
@@ -148,7 +152,7 @@ function mountCompletion(el: HTMLElement, item: CommandCompletion) {
     >
       <RecycleScroller
         :items="renderableCompletion.items"
-        :item-size="cell.height"
+        :item-size="cell!.height"
         key-field="value"
         class="terminal-completion-wrapper"
         list-tag="ul"
@@ -245,6 +249,10 @@ function mountCompletion(el: HTMLElement, item: CommandCompletion) {
     background: rgb(var(--color) / var(--opacity));
     border-radius: 50%;
   }
+  &.is-stroked::before {
+    background: rgb(var(--theme-background) / var(--opacity));
+    box-shadow: 0 0 0 1px rgb(var(--color)), 0 0 0 1px rgb(var(--color)) inset;
+  }
 }
 :deep(.terminal-highlight-block) {
   z-index: 0 !important;

diff --git a/src/renderer/utils/shell-integration.ts b/src/renderer/utils/shell-integration.ts
@@ -224,7 +224,7 @@ export class ShellIntegrationAddon implements ITerminalAddon {
                     xterm,
                     currentCommand.marker,
                     exitCode > 0 ? theme.red : theme.green,
-                    shouldHighlight ? 'transparent' : 'strong',
+                    shouldHighlight ? 'stroked' : 'strong',
                     currentCommand,
                   )
                 }
@@ -364,7 +364,7 @@ export class ShellIntegrationAddon implements ITerminalAddon {
     xterm: Terminal,
     marker: IMarker,
     color: string,
-    style?: 'strong' | 'transparent' | undefined,
+    style?: 'strong' | 'stroked' | undefined,
     command?: IntegratedShellCommand,
   ) {
     const rgba = toRGBA(color)
@@ -377,8 +377,11 @@ export class ShellIntegrationAddon implements ITerminalAddon {
     })!
     updateDecorationElement(decoration, el => {
       el.style.setProperty('--color', `${rgba.r} ${rgba.g} ${rgba.b}`)
-      el.style.setProperty('--opacity', style === 'strong' ? '1' : (style === 'transparent' ? '0' : '0.25'))
+      el.style.setProperty('--opacity', style ? '1' : '0.25')
       el.classList.add('terminal-command-mark')
+      if (style === 'stroked') {
+        el.classList.add('is-stroked')
+      }
       if (command) {
         el.classList.add('is-interactive')
         el.addEventListener('click', event => {