Merge pull request #1351 from goplus/dev

Release v1.6.2

Author: nighca

.github/workflows/publish-docker-image.yml

@@ -3,8 +3,6 @@ on:
   push:
     branches:
       - dev
-    paths-ignore:
-      - 'docs/**'
 jobs:
   publish-docker-image:
     runs-on: ubuntu-latest

.github/workflows/validate.yml

@@ -4,13 +4,9 @@ on:
   push:
     branches:
       - '**'
-    paths-ignore:
-      - 'docs/**'
   pull_request:
     branches:
       - '**'
-    paths-ignore:
-      - 'docs/**'
 
 jobs:
   spx-gui-lint:

spx-backend/internal/copilot/spx_defs.md

@@ -81,7 +81,7 @@ onTurning,onTurning info => {},"Listen to current sprite turning (heading change
 say,say word,"Make the sprite say some word, e.g., `say ""Hello!""`"
 say,"say word, seconds","Make the sprite say some word with duration, e.g., `say ""Hello!"", 2`"
 setCostume,setCostume name,"Set the current costume by specifying name, e.g., `setCostume ""happy""`"
-setHeading,setHeading direction,"Set heading to given value, e.g., `setHeading Up`"
+setHeading,setHeading direction,"Set heading to given value, e.g., `setHeading 90`"
 setRotationStyle,setRotationStyle style,"Set the rotation style of the sprite, e.g., `setRotationStyle LeftRight`"
 setSize,setSize size,"Set the size of current sprite, e.g., `setSize 2`"
 setXYpos,"setXYpos x, y","Set the sprite's position, e.g., `setXYpos 100, 100`"

spx-gui/src/components/asset/animation/CostumeItem.vue

@@ -17,7 +17,7 @@
           v-for="costume in props.sprite.costumes"
           :key="costume.id"
           :costume="costume"
-          :selected="selectedCostumeSet.has(costume)"
+          :checked="selectedCostumeSet.has(costume)"
           @click="handleCostumeClick(costume)"
         />
       </ul>
@@ -54,7 +54,7 @@ import type { Costume } from '@/models/costume'
 import type { Sprite } from '@/models/sprite'
 import { defaultFps } from '@/models/animation'
 import AnimationPlayer from '@/components/editor/sprite/animation/AnimationPlayer.vue'
-import CostumeItem from './CostumeItem.vue'
+import CostumeItem from '@/components/editor/sprite/CheckableCostumeItem.vue'
 
 const props = defineProps<{
   visible: boolean

spx-gui/src/components/asset/animation/GroupCostumesModal.vue

@@ -3,7 +3,7 @@
     :img-src="imgSrc"
     :img-loading="!imgSrc || imgLoading"
     :name="asset.displayName"
-    :selected="selected"
+    :selectable="{ selected }"
   />
 </template>
 

spx-gui/src/components/asset/library/BackdropItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <UISoundItem :selected="selected" :duration="formattedDuration" :name="asset.displayName">
+  <UISoundItem :selectable="{ selected }" :duration="formattedDuration" :name="asset.displayName">
     <template #player>
       <SoundPlayer :src="audioSrc" color="primary" />
     </template>

spx-gui/src/components/asset/library/SoundItem.vue

@@ -1,13 +1,27 @@
 <template>
-  <UISpriteItem :selected="selected" :img-src="imgSrc" :img-loading="!imgSrc || imgLoading" :name="asset.displayName" />
+  <UISpriteItem ref="wrapperRef" :selectable="{ selected }" :name="asset.displayName">
+    <template #img="{ style }">
+      <CostumesAutoPlayer
+        v-if="animation != null && hovered"
+        :style="style"
+        :costumes="animation.costumes"
+        :duration="animation.duration"
+        :placeholder-img="imgSrc"
+      />
+      <UIImg v-else :style="style" :src="imgSrc" :loading="imgLoading" />
+    </template>
+  </UISpriteItem>
 </template>
 
 <script setup lang="ts">
-import { UISpriteItem } from '@/components/ui'
+import { computed, ref } from 'vue'
+import { UIImg, UISpriteItem } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
 import type { AssetData } from '@/apis/asset'
 import { asset2Sprite } from '@/models/common/asset'
 import { useAsyncComputed } from '@/utils/utils'
+import { useHovered } from '@/utils/dom'
+import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 
 const props = defineProps<{
   asset: AssetData
@@ -16,4 +30,7 @@ const props = defineProps<{
 
 const sprite = useAsyncComputed(() => asset2Sprite(props.asset))
 const [imgSrc, imgLoading] = useFileUrl(() => sprite.value?.defaultCostume?.img)
+const wrapperRef = ref<InstanceType<typeof UISpriteItem>>()
+const hovered = useHovered(() => wrapperRef.value?.$el ?? null)
+const animation = computed(() => sprite.value?.getDefaultAnimation() ?? null)
 </script>

spx-gui/src/components/asset/library/SpriteItem.vue

@@ -53,7 +53,7 @@
               v-for="costume in costumes"
               :key="costume.id"
               :costume="costume"
-              :selected="isCostumeSelected(costume)"
+              :checked="isCostumeSelected(costume)"
               @click="handleCostumeClick(costume)"
             />
           </ul>
@@ -84,7 +84,7 @@ import type { MethodComponent } from './common/types'
 import ProcessItem from './common/ProcessItem.vue'
 import ImgPreview from './common/ImgPreview.vue'
 import ProcessDetail from './common/ProcessDetail.vue'
-import CostumeItem from './CostumeItem.vue'
+import CostumeItem from '@/components/editor/sprite/CheckableCostumeItem.vue'
 import originalThumbnail from './original-thumbnail.svg'
 import SplitSpriteSheet from './split-sprite-sheet/SplitSpriteSheet.vue'
 import splitSpriteSheetThumbnail from './split-sprite-sheet/thumbnail.svg'

spx-gui/src/components/asset/preprocessing/CostumeItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <UIBackdropItem :selected="selected" :img-src="imgSrc" :img-loading="!imgSrc" :name="asset.name" />
+  <UIBackdropItem :selectable="{ selected }" :img-src="imgSrc" :img-loading="!imgSrc" :name="asset.name" />
 </template>
 
 <script setup lang="ts">

spx-gui/src/components/asset/preprocessing/PreprocessModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <UISoundItem :selected="selected" :duration="formattedDuration" :name="asset.name">
+  <UISoundItem :selectable="{ selected }" :duration="formattedDuration" :name="asset.name">
     <template #player>
       <BlobSoundPlayer :blob="asset.blob" color="primary" />
     </template>

spx-gui/src/components/asset/scratch/BackdropItem.vue

@@ -1,11 +1,27 @@
 <template>
-  <UISpriteItem :selected="selected" :img-src="imgSrc" :img-loading="!imgSrc" :name="asset.name" />
+  <UISpriteItem ref="wrapperRef" :selectable="{ selected }" :name="asset.name">
+    <template #img="{ style }">
+      <CostumesAutoPlayer
+        v-if="animation != null && hovered"
+        :style="style"
+        :costumes="animation.costumes"
+        :duration="animation.duration"
+        :placeholder-img="imgSrc"
+      />
+      <UIImg v-else :style="style" :src="imgSrc" :loading="imgSrc == null" />
+    </template>
+  </UISpriteItem>
 </template>
 
 <script setup lang="ts">
-import { UISpriteItem } from '@/components/ui'
-import type { ExportedScratchSprite } from '@/utils/scratch'
-import { ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
+import { UIImg, UISpriteItem } from '@/components/ui'
+import { useHovered } from '@/utils/dom'
+import type { ExportedScratchFile, ExportedScratchSprite } from '@/utils/scratch'
+import { fromBlob } from '@/models/common/file'
+import { Costume } from '@/models/costume'
+import { defaultFps } from '@/models/animation'
+import CostumesAutoPlayer from '@/components/common/CostumesAutoPlayer.vue'
 
 const props = defineProps<{
   asset: ExportedScratchSprite
@@ -23,4 +39,23 @@ watchEffect((onCleanup) => {
 
   onCleanup(() => URL.revokeObjectURL(url))
 })
+
+const wrapperRef = ref<InstanceType<typeof UISpriteItem>>()
+const hovered = useHovered(() => wrapperRef.value?.$el ?? null)
+
+function adaptCostume(c: ExportedScratchFile) {
+  const file = fromBlob(c.name, c.blob)
+  return new Costume(c.name, file, {
+    bitmapResolution: c.bitmapResolution
+  })
+}
+
+const animation = computed(() => {
+  const costumes = props.asset.costumes
+  if (costumes.length <= 1) return null
+  return {
+    costumes: costumes.map(adaptCostume),
+    duration: costumes.length / defaultFps
+  }
+})
 </script>

spx-gui/src/components/asset/scratch/SoundItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { useMessageHandle } from '@/utils/exception'
+import { getCleanupSignal, type OnCleanup } from '@/utils/disposable'
+import type { Costume } from '@/models/costume'
+import CostumesPlayer from './CostumesPlayer.vue'
+
+const props = defineProps<{
+  costumes: Costume[]
+  /** Duration (in seconds) for all costumes to be played once */
+  duration: number
+  placeholderImg?: string | null
+}>()
+
+const playerRef = ref<InstanceType<typeof CostumesPlayer>>()
+
+const loadAndPlay = useMessageHandle(async (onCleanup: OnCleanup) => {
+  const player = playerRef.value
+  if (player == null) return
+  const signal = getCleanupSignal(onCleanup)
+  const { costumes, duration } = props
+  await player.load(costumes, duration, signal)
+  player.play(signal)
+}).fn
+
+watchEffect(loadAndPlay)
+</script>
+
+<template>
+  <CostumesPlayer ref="playerRef" :placeholder-img="placeholderImg" />
+</template>