Merge dev into trailhead (#679)

* spx-gui: delay input URL processing in RemoveBackground component (#669)

* fix required prop warnings (#673)

* feat: add build script to support windows (#675)

* spx-gui: prevent event propagation on UICornerIcon click (#674)

---------

Co-authored-by: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Co-authored-by: molinla <61045398+molinla@users.noreply.github.com>

spx-gui/build-wasm.bat

@@ -0,0 +1,31 @@
+@echo off
+setlocal
+echo Run this script from 'spx-gui' directory
+
+REM Change directory to ../tools/fmt
+cd ..\tools\fmt
+
+REM Call build script
+call build.bat
+
+REM Change directory to ../ispx
+cd ..\ispx
+
+REM Call build script
+call build.bat
+
+REM Change directory to ..
+cd ..
+
+REM Copy files to the destination
+copy fmt\static\main.wasm ..\spx-gui\src\assets\format.wasm
+copy ispx\main.wasm ..\spx-gui\src\assets\ispx\main.wasm
+
+REM Get GOROOT environment variable
+for /f "tokens=*" %%i in ('go env GOROOT') do set GOROOT=%%i
+
+REM Copy the wasm_exec.js file
+copy "%GOROOT%\misc\wasm\wasm_exec.js" ..\spx-gui\src\assets\wasm_exec.js
+
+echo Build WASM complete
+endlocal

spx-gui/src/components/asset/preprocessing/remove-background/RemoveBackground.vue

@@ -17,24 +17,24 @@
 import { ref } from 'vue'
 import { loadImg } from '@/utils/dom'
 import { stripExt } from '@/utils/path'
-import { untilNotNull, useAsyncComputed, memoizeAsync } from '@/utils/utils'
+import { memoizeAsync } from '@/utils/utils'
 import { getMimeFromExt } from '@/utils/file'
 import { toJpeg } from '@/utils/img'
 import { matting } from '@/apis/aigc'
 import { fromBlob, toNativeFile, File } from '@/models/common/file'
-import { createFileWithWebUrl, getWebUrl } from '@/models/common/cloud'
+import { createFileWithWebUrl, saveFileForWebUrl } from '@/models/common/cloud'
 import type { MethodComponentEmits, MethodComponentProps } from '../common/types'
 import ProcessDetail from '../common/ProcessDetail.vue'
 import ImgPreview from '../common/ImgPreview.vue'
 
 const props = defineProps<MethodComponentProps>()
 const emit = defineEmits<MethodComponentEmits>()
 
-const inputUrlsComputed = useAsyncComputed(() =>
+const getUrls = memoizeAsync((files: File[]) =>
  Promise.all(
- props.input.map(async (file) => {
+ files.map(async (file) => {
  file = await adaptImg(file)
- return getWebUrl(file)
+ return saveFileForWebUrl(file)
  })
  )
 )
@@ -48,15 +48,15 @@ const batchRemoveBackground = memoizeAsync(
 )
 
 async function apply() {
- const inputUrls = await untilNotNull(inputUrlsComputed)
+ const inputUrls = await getUrls(props.input)
  const outputUrls = await batchRemoveBackground(inputUrls)
  await drawTransitions(outputUrls)
  const outputFiles = outputUrls.map((url) => createFileWithWebUrl(url))
  emit('applied', outputFiles)
 }
 
 async function cancel() {
- const inputUrls = await untilNotNull(inputUrlsComputed)
+ const inputUrls = await getUrls(props.input)
  await drawTransitions(inputUrls, true)
  emit('cancel')
 }

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

@@ -1,7 +1,7 @@
 <!-- icon at the top-right corner of item -->
 
 <template>
- <div class="ui-corner-icon" :style="cssVars">
+ <div class="ui-corner-icon" :style="cssVars" @click.stop="emit('click', $event)">
  <UIIcon class="icon" :type="type" />
  </div>
 </template>
@@ -23,6 +23,10 @@ const props = withDefaults(
  }
 )
 
+const emit = defineEmits<{
+ click: [MouseEvent]
+}>()
+
 const uiVariables = useUIVariables()
 const cssVars = computed(() =>
  getCssVars('--ui-corner-icon-color-', uiVariables.color[props.color])

spx-gui/src/components/ui/block-items/UIEditorSoundItem.vue

@@ -21,7 +21,7 @@ import UIBlockItemTitle from './UIBlockItemTitle.vue'
 
 withDefaults(
  defineProps<{
- color: 'sound' | 'primary'
+ color?: 'sound' | 'primary'
  name: string
  selected: boolean
  }>(),

spx-gui/src/components/ui/block-items/UIEditorSpriteItem.vue

@@ -18,7 +18,7 @@ withDefaults(
  imgLoading: boolean
  name: string
  selected: boolean
- color: 'sprite' | 'primary'
+ color?: 'sprite' | 'primary'
  }>(),
  {
  color: 'sprite'

spx-gui/src/models/common/cloud.ts

@@ -93,7 +93,7 @@ export function createFileWithWebUrl(url: WebUrl, name = filename(url)) {
  })
 }
 
-export async function getWebUrl(file: File) {
+export async function saveFileForWebUrl(file: File) {
  const universalUrl = await saveFile(file)
  return universalUrlToWebUrl(universalUrl)
 }

tools/fmt/build.bat

@@ -0,0 +1,9 @@
+@echo off
+setlocal
+
+set GOOS=js
+set GOARCH=wasm
+
+go build -o static\main.wasm main.go
+
+endlocal

tools/ispx/build.bat

@@ -0,0 +1,9 @@
+@echo off
+setlocal
+
+set GOOS=js
+set GOARCH=wasm
+
+go build -tags canvas -o main.wasm main.go
+
+endlocal