Address TODO items for code-editor

spx-backend/internal/copilot/spx_defs.md

@@ -7,8 +7,8 @@ Name,Sample,Description
 backdropIndex,,Get the index of the current backdrop
 backdropName,,Get the name of the current backdrop
 broadcast,broadcast msg,"Broadcast a message, e.g., `broadcast ""msg""`"
-broadcast,"broadcast msg, wait","Broadcast a message with waiting, e.g., `broadcast ""msg"", true`"
-broadcast,"broadcast msg, data, wait","Broadcast a message with data and waiting, e.g., `broadcast ""msg"", data, true`"
+broadcast,"broadcast msg, true","Broadcast a message with waiting for related (`onMsg`) works to complete, e.g., `broadcast ""msg"", true`"
+broadcast,"broadcast msg, data, true","Broadcast a message with data and waiting for related (`onMsg`) works to complete, e.g., `broadcast ""msg"", data, true`"
 changeVolume,changeVolume dVolume,"Change the volume for sounds with given volume change, e.g., `changeVolume 10`"
 onClick,onClick => {},Listen to stage clicked
 onKey,"onKey key, => {}","Listen to given key pressed, e.g., `onKey KeyA, => {}`"
@@ -23,6 +23,7 @@ mousePressed,,Check if the mouse is currently pressed
 mouseX,,Get X position of the mouse
 mouseY,,Get Y position of the mouse
 nextBackdrop,,Switch to the next backdrop
+nextBackdrop,nextBackdrop true,"Switch to the next backdrop, with waiting for related (`onBackdrop`) works to complete"
 onAnyKey,onAnyKey key => {},Listen to any key pressed
 onBackdrop,onBackdrop backdrop => {},Listen to backdrop switching
 onBackdrop,"onBackdrop backdrop, => {}",Listen to switching to specific backdrop
@@ -33,9 +34,10 @@ play,play name,"Play sound with given name, e.g., `play ""explosion""`"
 play,"play name, wait","Play sound with given name and waiting, e.g., `play ""explosion"", true`"
 play,"play name, options","Play sound with given name and options, e.g., `play ""explosion"", { Loop: true }`"
 prevBackdrop,,Switch to the previous backdrop
+prevBackdrop,prevBackdrop true,"Switch to the previous backdrop, with waiting for related (`onBackdrop`) works to complete"
 setVolume,setVolume volume,"Set the volume for sounds, e.g., `setVolume 100`"
 startBackdrop,startBackdrop name,"Set the current backdrop by specifying name, e.g., `startBackdrop ""backdrop1""`"
-startBackdrop,"startBackdrop name, wait","Set the current backdrop by specifying name, with waiting, e.g., `startBackdrop ""backdrop1"", true`"
+startBackdrop,"startBackdrop name, true","Set the current backdrop by specifying name, with waiting for related (`onBackdrop`) works to complete, e.g., `startBackdrop ""backdrop1"", true`"
 stopAllSounds,,Stop all playing sounds
 volume,,Get the volume for sounds
 wait,wait seconds,"Block current execution (coroutine) for given seconds, e.g., `wait 0.5`"

spx-gui/src/components/editor/code-editor/code-editor.ts

@@ -62,15 +62,8 @@ import {
 import { TextDocument, createTextDocument } from './text-document'
 import { type Monaco } from './monaco'
 
-class ResourceReferencesProvider
-  extends Emitter<{
-    didChangeResourceReferences: [] // TODO
-  }>
-  implements IResourceReferencesProvider
-{
-  constructor(private lspClient: SpxLSPClient) {
-    super()
-  }
+class ResourceReferencesProvider implements IResourceReferencesProvider {
+  constructor(private lspClient: SpxLSPClient) {}
   async provideResourceReferences(ctx: ResourceReferencesContext): Promise<ResourceReference[]> {
     return this.lspClient.getResourceReferences(ctx.textDocument.id)
   }
@@ -117,7 +110,7 @@ class DiagnosticsProvider
     return { start, end }
   }
   async provideDiagnostics(ctx: DiagnosticsContext): Promise<Diagnostic[]> {
-    // TODO: get diagnostics from runtime
+    // TODO: get diagnostics from runtime. https://github.com/goplus/builder/issues/1256
     const diagnostics: Diagnostic[] = []
     const report = await this.lspClient.textDocumentDiagnostic({
       textDocument: ctx.textDocument.id
@@ -511,7 +504,6 @@ export class CodeEditor extends Disposable {
       async provideAPIReference(ctx, position) {
         const definitions = await lspClient
           .workspaceExecuteCommandSpxGetDefinitions({
-            // TODO: support signal
             textDocument: ctx.textDocument.id,
             position: toLSPPosition(position)
           })

spx-gui/src/components/editor/code-editor/common.ts

@@ -236,7 +236,7 @@ export function makeAdvancedMarkdownString(value: string | LocaleMessage): Advan
   return { value, flag: 'advanced' }
 }
 
-export type CommandIconType = 'explain' | 'fix' | 'goto' | 'modify' | 'rename'
+export type CommandIconType = 'explain' | 'fix' | 'goto' | 'modify' | 'rename' | 'copy' | 'copilot'
 
 /**
  * Documentation string for a definition. Typically:

spx-gui/src/components/editor/code-editor/document-base/gop.ts

@@ -1,11 +1,13 @@
 import { DefinitionKind, type DefinitionDocumentationItem, makeBasicMarkdownString, categories } from '../common'
 
-// TODO: more frequently-used tools for gop
+// TODO: https://github.com/goplus/builder/issues/1257
+// * Add more frequently-used statements for gop
+// * Review naming for these definitions
 
 export const forIterate: DefinitionDocumentationItem = {
   categories: [categories.control.flowControl],
   kind: DefinitionKind.Statement,
-  definition: { name: 'for_iterate' }, // TODO
+  definition: { name: 'for_iterate' },
   insertText: 'for ${1:i}, ${2:v} <- ${3:set} {\n\t${4:}\n}',
   overview: 'for i, v <- set {}',
   detail: makeBasicMarkdownString({
@@ -17,7 +19,7 @@ export const forIterate: DefinitionDocumentationItem = {
 export const forLoopWithCondition: DefinitionDocumentationItem = {
   categories: [categories.control.flowControl],
   kind: DefinitionKind.Statement,
-  definition: { name: 'for_loop_with_condition' }, // TODO
+  definition: { name: 'for_loop_with_condition' },
   insertText: 'for ${1:condition} {\n\t${2:}\n}',
   overview: 'for condition {}',
   detail: makeBasicMarkdownString({
@@ -29,7 +31,7 @@ export const forLoopWithCondition: DefinitionDocumentationItem = {
 export const forLoopWithRange: DefinitionDocumentationItem = {
   categories: [categories.control.flowControl],
   kind: DefinitionKind.Statement,
-  definition: { name: 'for_loop_with_range' }, // TODO
+  definition: { name: 'for_loop_with_range' },
   insertText: 'for ${1:i} <- ${2:start}:${3:end} {\n\t${4:}\n}',
   overview: 'for i <- start:end {}',
   detail: makeBasicMarkdownString({
@@ -41,7 +43,7 @@ export const forLoopWithRange: DefinitionDocumentationItem = {
 export const ifStatement: DefinitionDocumentationItem = {
   categories: [categories.control.flowControl],
   kind: DefinitionKind.Statement,
-  definition: { name: 'if_statement' }, // TODO
+  definition: { name: 'if_statement' },
   insertText: 'if ${1:condition} {\n\t${2:}\n}',
   overview: 'if condition {}',
   detail: makeBasicMarkdownString({
@@ -53,7 +55,7 @@ export const ifStatement: DefinitionDocumentationItem = {
 export const ifElseStatement: DefinitionDocumentationItem = {
   categories: [categories.control.flowControl],
   kind: DefinitionKind.Statement,
-  definition: { name: 'if_else_statement' }, // TODO
+  definition: { name: 'if_else_statement' },
   insertText: 'if ${1:condition} {\n\t${2:}\n} else {\n\t${3:}\n}',
   overview: 'if condition {} else {}',
   detail: makeBasicMarkdownString({
@@ -65,7 +67,7 @@ export const ifElseStatement: DefinitionDocumentationItem = {
 export const varDeclaration: DefinitionDocumentationItem = {
   categories: [categories.control.declaration],
   kind: DefinitionKind.Statement,
-  definition: { name: 'var_declaration' }, // TODO
+  definition: { name: 'var_declaration' },
   insertText: 'var ${1:name} ${2:type}',
   overview: 'var name type',
   detail: makeBasicMarkdownString({
@@ -77,7 +79,7 @@ export const varDeclaration: DefinitionDocumentationItem = {
 export const importStatement: DefinitionDocumentationItem = {
   categories: [categories.control.declaration],
   kind: DefinitionKind.Statement,
-  definition: { name: 'import_declaration' }, // TODO
+  definition: { name: 'import_declaration' },
   insertText: 'import "${1:package}"',
   overview: 'import "package"',
   detail: makeBasicMarkdownString({
@@ -89,7 +91,7 @@ export const importStatement: DefinitionDocumentationItem = {
 export const functionDeclaration: DefinitionDocumentationItem = {
   categories: [categories.control.declaration],
   kind: DefinitionKind.Statement,
-  definition: { name: 'func_declaration' }, // TODO
+  definition: { name: 'func_declaration' },
   insertText: 'func ${1:name}(${2:params}) ${3:returnType} {\n\t${4}\n}',
   overview: 'func name(params) {}',
   detail: makeBasicMarkdownString({

spx-gui/src/components/editor/code-editor/document-base/spx/index.ts

@@ -1086,15 +1086,15 @@ export const startBackdrop1: DefinitionDocumentationItem = {
     name: 'Game.startBackdrop',
     overloadId: '1'
   },
-  insertText: 'startBackdrop ${1:name}, ${2:wait}',
-  overview: 'startBackdrop name, wait',
+  insertText: 'startBackdrop ${1:name}, ${2:true}',
+  overview: 'startBackdrop name, true',
   detail: makeBasicMarkdownString({
-    en: 'Set the current backdrop by specifying name, with waiting, e.g., `startBackdrop "backdrop1", true`',
-    zh: '通过指定名称切换背景，并等待切换完成，如：`startBackdrop "backdrop1", true`'
+    en: 'Set the current backdrop by specifying name, with waiting for related (`onBackdrop`) works to complete, e.g., `startBackdrop "backdrop1", true`',
+    zh: '通过指定名称切换背景，并等待关联的（`onBackdrop`）行为结束，如：`startBackdrop "backdrop1", true`'
   })
 }
 
-export const nextBackdrop: DefinitionDocumentationItem = {
+export const nextBackdrop0: DefinitionDocumentationItem = {
   categories: [categories.look.backdrop],
   kind: DefinitionKind.Command,
   definition: {
@@ -1110,7 +1110,23 @@ export const nextBackdrop: DefinitionDocumentationItem = {
   })
 }
 
-export const prevBackdrop: DefinitionDocumentationItem = {
+export const nextBackdrop1: DefinitionDocumentationItem = {
+  categories: [categories.look.backdrop],
+  kind: DefinitionKind.Command,
+  definition: {
+    package: packageSpx,
+    name: 'Game.nextBackdrop',
+    overloadId: '1'
+  },
+  insertText: 'nextBackdrop ${2:true}',
+  overview: 'nextBackdrop true',
+  detail: makeBasicMarkdownString({
+    en: 'Switch to the next backdrop, with waiting for related (`onBackdrop`) works to complete',
+    zh: '切换到下一个背景，并等待关联的（`onBackdrop`）行为结束'
+  })
+}
+
+export const prevBackdrop0: DefinitionDocumentationItem = {
   categories: [categories.look.backdrop],
   kind: DefinitionKind.Command,
   definition: {
@@ -1119,13 +1135,29 @@ export const prevBackdrop: DefinitionDocumentationItem = {
     overloadId: '0'
   },
   insertText: 'prevBackdrop',
-  overview: 'prevBackdrop', // TODO: optional argument `wait`
+  overview: 'prevBackdrop',
   detail: makeBasicMarkdownString({
     en: 'Switch to the previous backdrop',
     zh: '切换到上一个背景'
   })
 }
 
+export const prevBackdrop1: DefinitionDocumentationItem = {
+  categories: [categories.look.backdrop],
+  kind: DefinitionKind.Command,
+  definition: {
+    package: packageSpx,
+    name: 'Game.prevBackdrop',
+    overloadId: '1'
+  },
+  insertText: 'prevBackdrop ${1:true}',
+  overview: 'prevBackdrop true',
+  detail: makeBasicMarkdownString({
+    en: 'Switch to the previous backdrop, with waiting for related (`onBackdrop`) works to complete',
+    zh: '切换到上一个背景，并等待关联的（`onBackdrop`）行为结束'
+  })
+}
+
 export const keyPressed: DefinitionDocumentationItem = {
   categories: [categories.sensing.keyboard],
   kind: DefinitionKind.Read,
@@ -1381,11 +1413,11 @@ export const broadcast1: DefinitionDocumentationItem = {
     name: 'Game.broadcast',
     overloadId: '1'
   },
-  insertText: 'broadcast ${1:"msg"}, ${2:wait}',
-  overview: 'broadcast msg, wait',
+  insertText: 'broadcast ${1:"msg"}, ${2:true}',
+  overview: 'broadcast msg, true',
   detail: makeBasicMarkdownString({
-    en: 'Broadcast a message with waiting, e.g., `broadcast "msg", true`',
-    zh: '广播一条消息并等待，如：`broadcast "msg", true`'
+    en: 'Broadcast a message with waiting for related (`onMsg`) works to complete, e.g., `broadcast "msg", true`',
+    zh: '广播一条消息并等待关联的（`onMsg`）行为结束，如：`broadcast "msg", true`'
   })
 }
 
@@ -1397,11 +1429,11 @@ export const broadcast2: DefinitionDocumentationItem = {
     name: 'Game.broadcast',
     overloadId: '2'
   },
-  insertText: 'broadcast ${1:"msg"}, ${2:data}, ${3:wait}',
-  overview: 'broadcast msg, data, wait',
+  insertText: 'broadcast ${1:"msg"}, ${2:data}, ${3:true}',
+  overview: 'broadcast msg, data, true',
   detail: makeBasicMarkdownString({
-    en: 'Broadcast a message with data and waiting, e.g., `broadcast "msg", data, true`',
-    zh: '广播一条消息（带有数据）并等待，如：`broadcast "msg", data, true`'
+    en: 'Broadcast a message with data and waiting for related (`onMsg`) works to complete, e.g., `broadcast "msg", data, true`',
+    zh: '广播一条带数据的消息并等待关联的（`onMsg`）行为结束，如：`broadcast "msg", data, true`'
   })
 }
 

spx-gui/src/components/editor/code-editor/monaco.ts

@@ -50,8 +50,5 @@ export async function getMonaco(lang: Lang) {
   if (monacoPromise != null) return monacoPromise
   // now refreshing page required if lang changed
   loader.config(getLoaderConfig(lang))
-  return (monacoPromise = loader.init().then((monaco) => {
-    // TODO: do general configuration for monaco here
-    return monaco
-  }))
+  return (monacoPromise = loader.init())
 }

spx-gui/src/components/editor/code-editor/text-document.ts

@@ -189,12 +189,12 @@ export class TextDocument
   pushEdits(edits: TextEdit[]): void {
     this.withChangeKindProgram(() => {
       this.monacoTextModel.pushEditOperations(
-        null, // TODO
+        null,
         edits.map((edit) => ({
           range: toMonacoRange(edit.range),
           text: edit.newText
         })),
-        () => null // TODO
+        () => null
       )
     })
   }

spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue

@@ -23,7 +23,7 @@ import {
   onDeactivated,
   onActivated
 } from 'vue'
-import { computedShallowReactive, untilNotNull, useLocalStorage } from '@/utils/utils'
+import { computedShallowReactive, untilNotNull, localStorageRef } from '@/utils/utils'
 import { getCleanupSignal } from '@/utils/disposable'
 import { theme, tabSize, insertSpaces } from '@/utils/spx/highlighter'
 import { useI18n } from '@/utils/i18n'
@@ -128,7 +128,7 @@ const uiRef = computed(() => {
 })
 
 const initialFontSize = 12
-const fontSize = useLocalStorage('spx-gui-code-font-size', initialFontSize)
+const fontSize = localStorageRef('spx-gui-code-font-size', initialFontSize)
 
 const monacoEditorOptions = computed<monaco.editor.IStandaloneEditorConstructionOptions>(() => ({
   language: 'spx',
@@ -193,7 +193,7 @@ const minSidebarWidth = 160 // px
 const minMonacoEditorWidth = 200 // px
 const codeEditorEl = ref<HTMLDivElement>()
 const resizeHandleEl = ref<HTMLDivElement>()
-const sidebarWidth = useLocalStorage('spx-code-editor-sidebar-width', defaultSidebarWidth)
+const sidebarWidth = localStorageRef('spx-code-editor-sidebar-width', defaultSidebarWidth)
 const isResizing = ref(false)
 
 watchEffect((onCleanup) => {
@@ -253,7 +253,12 @@ function zoomReset() {
       </footer>
       <CopilotUI v-show="uiRef.isCopilotActive" class="copilot" :controller="uiRef.copilotController" />
     </aside>
-    <div ref="resizeHandleEl" class="resize-handle" :style="{ left: `${sidebarWidth}px` }"></div>
+    <div
+      ref="resizeHandleEl"
+      class="resize-handle"
+      :class="{ active: isResizing }"
+      :style="{ left: `${sidebarWidth}px` }"
+    ></div>
     <MonacoEditorComp
       class="monaco-editor"
       :monaco="codeEditorCtx.getMonaco()"
@@ -313,19 +318,18 @@ function zoomReset() {
 
 .resize-handle {
   position: absolute;
-  width: 16px;
+  width: 13px;
   height: 100%;
-  margin-left: -8px;
+  margin-left: -7px;
   z-index: 10;
   cursor: col-resize;
   transition: background-color 0.2s;
 
-  // TODO: confirm style details
   &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(36, 41, 47, 0.05);
   }
   &.active {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(36, 41, 47, 0.1);
   }
 }
 

spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue

@@ -14,13 +14,10 @@ const props = defineProps<{
 
 const codeEditorCtx = useCodeEditorUICtx()
 
-const handleInsert = useMessageHandle(
-  () => {
-    codeEditorCtx.ui.insertSnippet(props.item.insertText)
-    codeEditorCtx.ui.editor.focus()
-  },
-  { en: 'Failed to insert', zh: '插入失败' }
-).fn
+const handleInsert = useMessageHandle(() => codeEditorCtx.ui.insertSnippet(props.item.insertText), {
+  en: 'Failed to insert',
+  zh: '插入失败'
+}).fn
 
 const handleExplain = useMessageHandle(
   () =>

spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceUI.vue

@@ -226,7 +226,7 @@ function handleCategoryClick(id: string) {
   if (categoryWrapper == null) return
   itemsWrapper.scrollTo({
     top: (categoryWrapper as HTMLElement).offsetTop,
-    behavior: 'smooth' // TODO: scroll faster?
+    behavior: 'smooth'
   })
 }
 </script>