Merge pull request #1078 from goplus/dev

Release v1.5.3

spx-gui/src/components/community/user/UserItem.vue

@@ -20,7 +20,7 @@ const userRoute = computed(() => getUserPageRoute(props.user.username))
     <UserAvatar class="avatar" :user="user.username" />
     <RouterUILink class="name" type="boring" :to="userRoute">{{ user.displayName }}</RouterUILink>
     <UserJoinedAt class="joined-at" :time="user.createdAt" />
-    <TextView class="description" :text="user.description" />
+    <TextView v-if="!!user.description" class="description" :text="user.description" />
     <FollowButton class="follow" :name="user.username" />
   </li>
 </template>

spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts

@@ -188,7 +188,7 @@ export const gameCategory: ToolCategory = {
     },
     {
       label: { en: 'Others', zh: '其他' },
-      tools: [spx.rand, gop.println]
+      tools: [spx.rand, gop.println, spx.getWidget]
     }
   ]
 }
@@ -253,6 +253,23 @@ export function getVariableCategory(project: Project): ToolCategory {
     })
   })
 
+  groups.push({
+    label: { en: 'Widgets', zh: '控件' },
+    tools: project.stage.widgets.map((widget) => {
+      const keyword = `"${widget.name}"`
+      return {
+        type: ToolType.variable,
+        target: ToolContext.all,
+        keyword,
+        desc: { en: `Widget "${widget.name}"`, zh: `控件 ${widget.name}` },
+        usage: {
+          sample: keyword,
+          insertText: keyword
+        }
+      }
+    })
+  })
+
   if (project.selectedSprite != null) {
     groups.push({
       label: {

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

@@ -974,6 +974,20 @@ export const exit: Tool = {
   }
 }
 
+export const getWidget: Tool = {
+  type: ToolType.function,
+  callEffect: ToolCallEffect.read,
+  target: ToolContext.all,
+  keyword: 'getWidget',
+  desc: { en: 'Get the widget by given name', zh: '通过指定名称获取控件' },
+  usage: {
+    sample: 'getWidget(Monitor, "monitor1")',
+    insertText: 'getWidget(${1:Monitor}, ${2:name})'
+  }
+}
+
+// TODO: definition for widget methods
+
 function defineConst(name: string, desc: LocaleMessage): Tool {
   name = name[0].toUpperCase() + name.slice(1) // it's strange, but required
   return {

spx-gui/src/components/editor/preview/EditorPreview.vue

@@ -19,15 +19,19 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { UICard, UICardHeader, UIButton, UIFullScreenModal } from '@/components/ui'
 import StageViewer from './stage-viewer/StageViewer.vue'
-import RunnerContainer from '@/components/project/runner/RunnerContainer.vue'
+import RunnerContainer, { preload as preloadRunner } from '@/components/project/runner/RunnerContainer.vue'
 
 let show = ref(false)
 
 const editorCtx = useEditorCtx()
+
+onMounted(() => {
+  preloadRunner()
+})
 </script>
 
 <style scoped lang="scss">

spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue

@@ -1,6 +1,12 @@
 <template>
   <section class="wrapper">
-    <UIDropdown trigger="manual" :visible="activeSetting != null" placement="top" @click-outside="handleClickOutside">
+    <UIDropdown
+      trigger="manual"
+      :visible="activeSetting != null"
+      placement="top"
+      @click-outside="handleClickOutside"
+      @update:visible="handleDropdownVisibleUpdate"
+    >
       <template #trigger>
         <ul class="settings">
           <li class="setting" :class="{ active: activeSetting === 'duration' }" @click="handleSummaryClick('duration')">
@@ -75,6 +81,10 @@ function handleClickOutside(e: MouseEvent) {
   if (isInPopup(e.target as HTMLElement | null)) return
   activeSetting.value = null
 }
+
+function handleDropdownVisibleUpdate(visible: boolean) {
+  if (!visible) activeSetting.value = null
+}
 </script>
 
 <style lang="scss" scoped>

spx-gui/src/components/project/runner/IframeDisplay.vue

@@ -1,6 +1,34 @@
 <template>
   <iframe ref="iframe" class="iframe" frameborder="0" src="about:blank" />
 </template>
+
+<script lang="ts">
+import { ref, watch } from 'vue'
+import rawRunnerHtml from '@/assets/ispx/runner.html?raw'
+import wasmExecUrl from '@/assets/wasm_exec.js?url'
+import wasmUrl from '@/assets/ispx/main.wasm?url'
+
+function addPrefetchLink(url: string) {
+  // Use `prefetch` instead of `preload`:
+  // * `preload` indicates higher priority than `prefetch`. Preloaded content are expected to be used soon. For example, chrome will warn if the preloaded content is not used within 3 or 5 seconds. While project here will not be runned until the user clicks some "run" button.
+  // * `preload` results are not shared across different documents, while the iframe content is a different document. The "preloading" is meaningful only when the HTTP cache is shared, which is more like the case of `prefetch`.
+  const link = document.createElement('link')
+  link.rel = 'prefetch'
+  link.href = url
+  link.crossOrigin = 'anonymous'
+  link.onload = link.onerror = () => {
+    document.head.removeChild(link)
+  }
+  document.head.appendChild(link)
+}
+
+// preload resources (for example, wasm files) to accelerate the loading
+export function preload() {
+  addPrefetchLink(wasmExecUrl)
+  addPrefetchLink(wasmUrl)
+}
+</script>
+
 <script setup lang="ts">
 const emit = defineEmits<{
   console: [type: 'log' | 'warn', args: unknown[]]
@@ -12,12 +40,6 @@ interface IframeWindow extends Window {
   console: typeof console
 }
 
-import { ref } from 'vue'
-import rawRunnerHtml from '@/assets/ispx/runner.html?raw'
-import wasmExecUrl from '@/assets/wasm_exec.js?url'
-import wasmUrl from '@/assets/ispx/main.wasm?url'
-import { watch } from 'vue'
-
 const props = defineProps<{ zipData: ArrayBuffer | Uint8Array }>()
 
 const iframe = ref<HTMLIFrameElement>()

spx-gui/src/components/project/runner/ProjectRunner.vue

@@ -6,13 +6,17 @@
   </div>
 </template>
 
+<script lang="ts">
+import IframeDisplay, { preload } from './IframeDisplay.vue'
+export { preload }
+</script>
+
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue'
 import { registerPlayer } from '@/utils/player-registry'
 import { useFileUrl } from '@/utils/file'
 import { Project } from '@/models/project'
 import { UIImg, UILoading } from '@/components/ui'
-import IframeDisplay from './IframeDisplay.vue'
 
 const props = defineProps<{ project: Project }>()
 

spx-gui/src/components/project/runner/RunnerContainer.vue

@@ -48,11 +48,16 @@
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import ProjectRunner, { preload } from './ProjectRunner.vue'
+export { preload }
+</script>
+
 <script setup lang="ts">
 import { onMounted, ref, type CSSProperties, watch, nextTick } from 'vue'
 import dayjs from 'dayjs'
 import type { Project } from '@/models/project'
-import ProjectRunner from './ProjectRunner.vue'
 import { usePublishProject } from '@/components/project'
 import { UIButton, UIIcon, UIModalClose } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'

spx-gui/src/components/ui/UIDropdown.vue

@@ -32,7 +32,7 @@ export function useDropdown() {
 </script>
 
 <script setup lang="ts">
-import { inject, provide, ref, type InjectionKey, computed, type CSSProperties } from 'vue'
+import { inject, provide, ref, type InjectionKey, computed, type CSSProperties, watchEffect } from 'vue'
 import { NPopover } from 'naive-ui'
 import { usePopupContainer } from './utils'
 
@@ -89,21 +89,33 @@ function handleUpdateShow(show: boolean) {
   emit('update:visible', show)
 }
 
+function setVisible(visible: boolean) {
+  // `NPopover.setShow` sets show status in uncontrolled mode without triggering the `on-update:show` callback.
+  // So we need to manually trigger the `on-update:show` callback.
+  nPopoverRef.value?.setShow(visible)
+  handleUpdateShow(visible)
+}
+
 function handleClickOutside(e: MouseEvent) {
   const triggerEl = nPopoverRef.value?.binderInstRef?.targetRef
   // naive-ui triggers `clickoutside` event when trigger-element clicked, so we need to fix it
   if (triggerEl != null && triggerEl.contains(e.target as Node)) return
   emit('clickOutside', e)
 }
 
-provide(dropdownCtrlKey, {
-  setVisible(visible) {
-    // `NPopover.setShow` sets show status in uncontrolled mode without triggering the `on-update:show` callback.
-    // So we need to manually trigger the `on-update:show` callback.
-    nPopoverRef.value?.setShow(visible)
-    handleUpdateShow(visible)
+watchEffect((onCleanup) => {
+  // Currently, pressing the `Escape` key closes all modals and dropdowns.
+  // TODO: Ideally, only the topmost modal or dropdown should be closed.
+  function handleDocumentKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') setVisible(false)
   }
+  window.addEventListener('keydown', handleDocumentKeydown)
+  onCleanup(() => {
+    window.removeEventListener('keydown', handleDocumentKeydown)
+  })
 })
+
+provide(dropdownCtrlKey, { setVisible })
 </script>
 
 <style lang="scss" scoped></style>

spx-gui/src/components/ui/modal/UIDropdownModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="wrapper">
+  <form class="wrapper" @submit.prevent="emit('confirm')">
     <header class="header">
       <h4 class="title">{{ title }}</h4>
       <UIModalClose class="close" @click="emit('cancel')" />
@@ -12,11 +12,11 @@
       <UIButton type="boring" @click="emit('cancel')">
         {{ $t({ en: 'Cancel', zh: '取消' }) }}
       </UIButton>
-      <UIButton type="primary" @click="emit('confirm')">
+      <UIButton type="primary" html-type="submit">
         {{ $t({ en: 'Confirm', zh: '确认' }) }}
       </UIButton>
     </footer>
-  </section>
+  </form>
 </template>
 <script setup lang="ts">
 import { UIButton, UIDivider } from '@/components/ui'