+
+
+
+
+ {{ $t({ en: 'Original', zh: '原图' }) }}
+
+
+
+
@@ -60,7 +59,7 @@
-
diff --git a/spx-gui/src/components/editor/sound/waveform/WaveformDisplay.vue b/spx-gui/src/components/editor/sound/waveform/WaveformDisplay.vue
new file mode 100644
index 000000000..a8b39815f
--- /dev/null
+++ b/spx-gui/src/components/editor/sound/waveform/WaveformDisplay.vue
@@ -0,0 +1,101 @@
+
+
+
+
diff --git a/spx-gui/src/components/editor/sound/waveform/WaveformPlayer.vue b/spx-gui/src/components/editor/sound/waveform/WaveformPlayer.vue
new file mode 100644
index 000000000..26797218f
--- /dev/null
+++ b/spx-gui/src/components/editor/sound/waveform/WaveformPlayer.vue
@@ -0,0 +1,191 @@
+
+ (null)
- let gainNode: GainNode
- let audioElement: HTMLAudioElement
-
- watch(gain, (value) => {
- if (!gainNode) return
- gainNode.gain.value = value
- if (wavesurfer?.value?.getDecodedData()) {
- // Trigger a redraw only when loaded
- wavesurfer.value.zoom(1)
- }
- })
-
- watch(container, (newContainer, oldContainer, onCleanup) => {
- if (newContainer == null) throw new Error('wavesurfer container not ready')
- audioElement = document.createElement('audio')
-
- const audioContext = getAudioContext()
- const source = audioContext.createMediaElementSource(audioElement)
- const gainNode_ = audioContext.createGain()
- source.connect(gainNode_)
- gainNode_.connect(audioContext.destination)
- gainNode_.gain.value = gain()
- gainNode = gainNode_
-
- /**
- * Cache for averaged data. Only used for recording.
- * As we expect the `WaveSurfer` to be destroyed and recreated on every recording,
- * we don't need to reset the cache when the recording stops.
- */
- let cache: {
- averagedData: number[]
- originalLength: number
- blockSize: number
- }
-
- wavesurfer.value = new WaveSurfer({
- interact: false,
- container: newContainer,
- waveColor: uiVariables.color.sound[400],
- progressColor: uiVariables.color.sound[400],
- height: 'auto',
- cursorWidth: 1,
- cursorColor: uiVariables.color.grey[800],
- normalize: true,
- media: audioElement,
- renderFunction: (peaks: (Float32Array | number[])[], ctx: CanvasRenderingContext2D): void => {
- try {
- const halfHeight = ctx.canvas.height / 2
-
- const averageBlock = (data: number[] | Float32Array, blockSize: number): number[] => {
- // Check if we can use the cached data
- if (
- recording &&
- cache &&
- cache.blockSize === blockSize &&
- cache.originalLength <= data.length
- ) {
- const newBlocks =
- Math.floor(data.length / blockSize) - Math.floor(cache.originalLength / blockSize)
-
- // If there are new blocks to process
- if (newBlocks > 0) {
- const newAveragedData = cache.averagedData.slice()
- const startIndex = cache.originalLength
- for (let i = 0; i < newBlocks; i++) {
- let sum = 0
- for (let j = 0; j < blockSize; j++) {
- const index = startIndex + i * blockSize + j
- sum += Math.max(0, data[index])
- }
- newAveragedData.push(sum / blockSize)
- }
-
- cache = {
- averagedData: newAveragedData,
- originalLength: data.length,
- blockSize
- }
- return newAveragedData
- }
-
- // If no new blocks to process, return cached data
- return cache.averagedData
- }
-
- // Calculate new averaged data if cache is not valid or not present
- const averagedData: number[] = new Array(Math.floor(data.length / blockSize))
- for (let i = 0; i < averagedData.length; i++) {
- let sum = 0
- for (let j = 0; j < blockSize; j++) {
- const index = i * blockSize + j
- sum += Math.max(0, data[index])
- }
- averagedData[i] = sum / blockSize
- }
-
- // Update cache with new averaged data
- cache = {
- averagedData,
- originalLength: data.length,
- blockSize
- }
-
- return averagedData
- }
-
- const drawSmoothCurve = (
- ctx: CanvasRenderingContext2D,
- points: number[],
- getPoint: (index: number) => number
- ) => {
- const segmentLength = ctx.canvas.width / (points.length - 1)
-
- ctx.beginPath()
- ctx.moveTo(0, halfHeight)
-
- for (let i = 0; i < points.length - 2; i++) {
- const xc = (i * segmentLength + (i + 1) * segmentLength) / 2
- const yc = (getPoint(i) + getPoint(i + 1)) / 2
- ctx.quadraticCurveTo(i * segmentLength, getPoint(i), xc, yc)
- }
-
- ctx.quadraticCurveTo(
- (points.length - 2) * segmentLength,
- getPoint(points.length - 2),
- ctx.canvas.width,
- getPoint(points.length - 1)
- )
-
- ctx.lineTo(ctx.canvas.width, halfHeight)
-
- ctx.strokeStyle = uiVariables.color.sound[400]
- ctx.lineWidth = 2
- ctx.stroke()
- ctx.closePath()
- ctx.fillStyle = uiVariables.color.sound[400]
- ctx.fill()
- }
-
- const channel = peaks[0]
-
- const scale = gain() * 1200
-
- // TODO: For now, blockSize is fixed to 2000 for longer recordings
- // to address the issue of slow update. This should be optimized
- // in the future.
- const blockSize = channel.length > 200000 ? 2000 : channel.length > 100000 ? 1000 : 500
-
- const smoothedChannel = averageBlock(channel, blockSize)
-
- drawSmoothCurve(
- ctx,
- smoothedChannel,
- (index: number) => smoothedChannel[index] * scale + halfHeight
- )
- drawSmoothCurve(
- ctx,
- smoothedChannel,
- (index: number) => -smoothedChannel[index] * scale + halfHeight
- )
- } catch (e) {
- // wavesurfer does not log errors so we do it ourselves
- console.error(e)
- }
- }
- })
-
- onCleanup(() => {
- wavesurfer.value?.destroy()
- })
- })
-
- return wavesurfer
-}
diff --git a/spx-gui/src/utils/wavesurfer-record.ts b/spx-gui/src/utils/wavesurfer-record.ts
deleted file mode 100644
index e57b7600d..000000000
--- a/spx-gui/src/utils/wavesurfer-record.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-// Copied and modified from:
-// https://github.com/katspaugh/wavesurfer.js/blob/main/src/plugins/record.ts
-
-/**
- * Record audio from the microphone with a real-time waveform preview
- */
-
-import BasePlugin from 'wavesurfer.js/dist/base-plugin.js'
-import type { BasePluginEvents } from 'wavesurfer.js/dist/plugins/base-plugin.js'
-import Timer from 'wavesurfer.js/dist/timer.js'
-
-export type RecordPluginOptions = {
- /** The MIME type to use when recording audio */
- mimeType?: MediaRecorderOptions['mimeType']
- /** The audio bitrate to use when recording audio, defaults to 128000 to avoid a VBR encoding. */
- audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond']
- /** Whether to render the recorded audio, true by default */
- renderRecordedAudio?: boolean
-}
-
-export type RecordPluginDeviceOptions = {
- /** The device ID of the microphone to use */
- deviceId?: string | { exact: string }
-}
-
-export type RecordPluginEvents = BasePluginEvents & {
- 'record-start': []
- 'record-pause': [blob: Blob]
- 'record-resume': []
- 'record-end': [blob: Blob]
- /** Fires continuously while recording */
- 'record-progress': [duration: number]
-}
-
-type MicStream = {
- onDestroy: () => void
- onEnd: () => void
-}
-
-const DEFAULT_BITS_PER_SECOND = 128000
-
-const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3']
-const findSupportedMimeType = () =>
- MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType))
-
-export class RecordPlugin extends BasePlugin {
- private stream: MediaStream | null = null
- private mediaRecorder: MediaRecorder | null = null
- private isWaveformPaused = false
- private originalOptions: { cursorWidth: number; interact: boolean } | undefined
- private timer: Timer
- private lastStartTime = 0
- private lastDuration = 0
- private duration = 0
-
- /** Create an instance of the Record plugin */
- constructor(options: RecordPluginOptions) {
- super({
- ...options,
- audioBitsPerSecond: options.audioBitsPerSecond ?? DEFAULT_BITS_PER_SECOND,
- renderRecordedAudio: options.renderRecordedAudio ?? true
- })
-
- this.timer = new Timer()
-
- this.subscriptions.push(
- this.timer.on('tick', () => {
- const currentTime = performance.now() - this.lastStartTime
- this.duration = this.isPaused() ? this.duration : this.lastDuration + currentTime
- this.emit('record-progress', this.duration)
- })
- )
- }
-
- /** Create an instance of the Record plugin */
- public static create(options?: RecordPluginOptions) {
- return new RecordPlugin(options || {})
- }
-
- public renderMicStream(stream: MediaStream): MicStream {
- const audioContext = new AudioContext()
- const source = audioContext.createMediaStreamSource(stream)
- const analyser = audioContext.createAnalyser()
- analyser.fftSize = 1024
- source.connect(analyser)
-
- const dataArray = new Float32Array(analyser.frequencyBinCount)
- const dataWindow: number[] = []
-
- let animationId: number
-
- const drawWaveform = () => {
- if (this.isWaveformPaused) {
- animationId = requestAnimationFrame(drawWaveform)
- return
- }
-
- analyser.getFloatTimeDomainData(dataArray)
- dataWindow.push(...dataArray)
-
- if (this.wavesurfer) {
- this.originalOptions ??= {
- cursorWidth: this.wavesurfer.options.cursorWidth,
- interact: this.wavesurfer.options.interact
- }
- this.wavesurfer.options.cursorWidth = 0
- this.wavesurfer.options.interact = false
- this.wavesurfer.load('', [dataWindow], this.duration)
- }
-
- animationId = requestAnimationFrame(drawWaveform)
- }
-
- drawWaveform()
-
- return {
- onDestroy: () => {
- cancelAnimationFrame(animationId)
- source?.disconnect()
- audioContext?.close()
- },
- onEnd: () => {
- this.isWaveformPaused = true
- cancelAnimationFrame(animationId)
- this.stopMic()
- }
- }
- }
-
- /** Request access to the microphone and start monitoring incoming audio */
- public async startMic(options?: RecordPluginDeviceOptions): Promise {
- let stream: MediaStream
- try {
- stream = await navigator.mediaDevices.getUserMedia({
- audio: options?.deviceId ? { deviceId: options.deviceId } : true
- })
- } catch (err) {
- throw new Error('Error accessing the microphone: ' + (err as Error).message)
- }
-
- const { onDestroy, onEnd } = this.renderMicStream(stream)
- this.subscriptions.push(this.once('destroy', onDestroy))
- this.subscriptions.push(this.once('record-end', onEnd))
- this.stream = stream
-
- return stream
- }
-
- /** Stop monitoring incoming audio */
- public stopMic() {
- if (!this.stream) return
- this.stream.getTracks().forEach((track) => track.stop())
- this.stream = null
- this.mediaRecorder = null
- }
-
- /** Start recording audio from the microphone */
- public async startRecording(options?: RecordPluginDeviceOptions) {
- const stream = this.stream || (await this.startMic(options))
- const mediaRecorder =
- this.mediaRecorder ||
- new MediaRecorder(stream, {
- mimeType: this.options.mimeType || findSupportedMimeType(),
- audioBitsPerSecond: this.options.audioBitsPerSecond
- })
- this.mediaRecorder = mediaRecorder
- this.stopRecording()
-
- const recordedChunks: BlobPart[] = []
-
- mediaRecorder.ondataavailable = (event) => {
- if (event.data.size > 0) {
- recordedChunks.push(event.data)
- }
- }
-
- const emitWithBlob = (ev: 'record-pause' | 'record-end') => {
- const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType })
- this.emit(ev, blob)
- if (this.options.renderRecordedAudio) {
- this.applyOriginalOptionsIfNeeded()
- this.wavesurfer?.loadBlob(blob)
- }
- }
-
- mediaRecorder.onpause = () => emitWithBlob('record-pause')
-
- mediaRecorder.onstop = () => emitWithBlob('record-end')
-
- mediaRecorder.start()
- this.lastStartTime = performance.now()
- this.lastDuration = 0
- this.duration = 0
- this.isWaveformPaused = false
- this.timer.start()
-
- this.emit('record-start')
- }
-
- /** Get the duration of the recording */
- public getDuration(): number {
- return this.duration
- }
-
- /** Check if the audio is being recorded */
- public isRecording(): boolean {
- return this.mediaRecorder?.state === 'recording'
- }
-
- public isPaused(): boolean {
- return this.mediaRecorder?.state === 'paused'
- }
-
- public isActive(): boolean {
- return this.mediaRecorder?.state !== 'inactive'
- }
-
- /** Stop the recording */
- public stopRecording() {
- if (this.isActive()) {
- this.mediaRecorder?.stop()
- this.timer.stop()
- }
- }
-
- /** Pause the recording */
- public pauseRecording() {
- if (this.isRecording()) {
- this.isWaveformPaused = true
- this.mediaRecorder?.requestData()
- this.mediaRecorder?.pause()
- this.timer.stop()
- this.lastDuration = this.duration
- }
- }
-
- /** Resume the recording */
- public resumeRecording() {
- if (this.isPaused()) {
- this.isWaveformPaused = false
- this.mediaRecorder?.resume()
- this.timer.start()
- this.lastStartTime = performance.now()
- this.emit('record-resume')
- }
- }
-
- /** Get a list of available audio devices
- * You can use this to get the device ID of the microphone to use with the startMic and startRecording methods
- * Will return an empty array if the browser doesn't support the MediaDevices API or if the user has not granted access to the microphone
- * You can ask for permission to the microphone by calling startMic
- */
- public static async getAvailableAudioDevices() {
- return navigator.mediaDevices
- .enumerateDevices()
- .then((devices) => devices.filter((device) => device.kind === 'audioinput'))
- }
-
- /** Destroy the plugin */
- public destroy() {
- this.applyOriginalOptionsIfNeeded()
- super.destroy()
- this.stopRecording()
- this.stopMic()
- }
-
- private applyOriginalOptionsIfNeeded() {
- if (this.wavesurfer && this.originalOptions) {
- this.wavesurfer.options.cursorWidth = this.originalOptions.cursorWidth
- this.wavesurfer.options.interact = this.originalOptions.interact
- delete this.originalOptions
- }
- }
-}
From a2a822704775a36e4e78a402d91d7ced4e5ec0b3 Mon Sep 17 00:00:00 2001
From: Hanxing Yang
Date: Tue, 25 Jun 2024 10:27:25 +0800
Subject: [PATCH 08/57] Fix last-select issue when project switched (#612)
* fix last-select issue when project switched
* avoid effectScope
---
spx-gui/src/components/editor/panels/EditorPanels.vue | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/spx-gui/src/components/editor/panels/EditorPanels.vue b/spx-gui/src/components/editor/panels/EditorPanels.vue
index 7629dd09b..2810d3799 100644
--- a/spx-gui/src/components/editor/panels/EditorPanels.vue
+++ b/spx-gui/src/components/editor/panels/EditorPanels.vue
@@ -37,8 +37,13 @@ watch(
const lastSelectedSprite = shallowRef(null)
const lastSelectedSound = shallowRef(null)
watch(
- () => editorCtx.project.selected,
- (_, lastSelected) => {
+ () => [editorCtx.project, editorCtx.project.selected] as const,
+ ([project], [lastProject, lastSelected]) => {
+ if (project !== lastProject) {
+ lastSelectedSprite.value = null
+ lastSelectedSound.value = null
+ return
+ }
if (lastSelected?.type === 'sprite') lastSelectedSprite.value = lastSelected.name
else if (lastSelected?.type === 'sound') lastSelectedSound.value = lastSelected.name
}
From b29bb3d3cc2bc7f31ddc56c2d7e2674b71770a81 Mon Sep 17 00:00:00 2001
From: Hanxing Yang
Date: Tue, 25 Jun 2024 12:19:01 +0800
Subject: [PATCH 09/57] Model `Animation` (#609)
* model animation
* prettier
* typo
---
spx-gui/src/models/animation.ts | 169 ++++++++++++++++++++++++
spx-gui/src/models/common/asset-name.ts | 74 ++++++++---
spx-gui/src/models/costume.ts | 19 +--
spx-gui/src/models/project/index.ts | 2 +-
spx-gui/src/models/sprite.ts | 106 ++++++++++++---
5 files changed, 324 insertions(+), 46 deletions(-)
create mode 100644 spx-gui/src/models/animation.ts
diff --git a/spx-gui/src/models/animation.ts b/spx-gui/src/models/animation.ts
new file mode 100644
index 000000000..13a103d03
--- /dev/null
+++ b/spx-gui/src/models/animation.ts
@@ -0,0 +1,169 @@
+import { reactive } from 'vue'
+
+import type { Sprite } from './sprite'
+import {
+ ensureValidCostumeName,
+ getAnimationName,
+ validateAnimationName
+} from './common/asset-name'
+import type { Costume, RawCostumeConfig } from './costume'
+import type { Files } from './common/file'
+
+enum AniType {
+ frame = 0,
+ move = 1,
+ turn = 2,
+ glide = 3
+}
+
+type ActionConfig = {
+ /** Sound name to play */
+ play?: string
+ // not supported by builder:
+ costumes?: unknown
+}
+
+const defaultFps = 25 // TODO
+
+export type AnimationInits = {
+ duration?: number
+ anitype?: number
+ onStart?: ActionConfig
+
+ // not supported by builder:
+ fps?: number
+ isLoop?: boolean // TODO
+ onPlay?: ActionConfig
+}
+
+export type RawAnimationConfig = AnimationInits & {
+ from?: number | string
+ to?: number | string
+}
+
+export class Animation {
+ private sprite: Sprite | null = null
+ setSprite(sprite: Sprite | null) {
+ this.sprite = sprite
+ }
+
+ name: string
+ setName(name: string) {
+ const err = validateAnimationName(name, this.sprite)
+ if (err != null) throw new Error(`invalid name ${name}: ${err.en}`)
+ this.name = name
+ }
+
+ private get costumeNamePrefix() {
+ // Costumes of animation will be added to sprite's costumes for spx to run,
+ // we add prefix for costume name to avoid naming conflict in sprite's costumes.
+ // It's important to keep the prefix backward compatible.
+ return `__animation_${this.name}_`
+ }
+
+ withCostumeNamePrefix(name: string) {
+ return this.costumeNamePrefix + name
+ }
+
+ private stripCostumeNamePrefix(name: string) {
+ if (!name.startsWith(this.costumeNamePrefix)) return name
+ return name.slice(this.costumeNamePrefix.length)
+ }
+
+ costumes: Costume[]
+ // For now, detailed methods to manipulate costumes are not needed, we may implement them later
+ setCostumes(costumes: Costume[]) {
+ for (const costume of costumes) {
+ let costumeName = this.stripCostumeNamePrefix(costume.name)
+ costumeName = ensureValidCostumeName(costumeName, this)
+ costume.setName(costumeName)
+ costume.setParent(this)
+ }
+ this.costumes = costumes
+ if (this.duration == null) {
+ this.duration = costumes.length / defaultFps
+ }
+ }
+
+ duration: number
+ setDuration(duration: number) {
+ this.duration = duration
+ }
+
+ sound: string | null
+ setSound(sound: string | null) {
+ this.sound = sound
+ }
+
+ constructor(name: string, inits?: AnimationInits) {
+ this.name = name
+ this.costumes = []
+ this.duration = inits?.duration ?? 0
+ this.sound = inits?.onStart?.play ?? null
+
+ for (const field of ['fps', 'isLoop', 'onPlay'] as const) {
+ if (inits?.[field] != null) console.warn(`unsupported field: ${field} for sprite ${name}`)
+ }
+
+ return reactive(this) as this
+ }
+
+ /**
+ * Create instance with default inits
+ * Note that the "default" means default behavior for builder, not the default behavior of spx
+ */
+ static async create(
+ nameBase: string,
+ sprite: Sprite,
+ costumes: Costume[],
+ inits?: AnimationInits
+ ) {
+ for (const costume of costumes) {
+ sprite.removeCostume(costume.name)
+ }
+ const animation = new Animation(getAnimationName(null, nameBase), inits)
+ animation.setCostumes(costumes)
+ return animation
+ }
+
+ static load(name: string, { from, to, ...inits }: RawAnimationConfig, sprite: Sprite) {
+ if (from == null || to == null) throw new Error(`from and to expected for Animation ${name}`)
+ const fromIndex = getCostumeIndex(sprite.costumes, from)
+ const toIndex = getCostumeIndex(sprite.costumes, to)
+ const costumes = sprite.costumes.slice(fromIndex, toIndex + 1)
+ for (const costume of costumes) {
+ sprite.removeCostume(costume.name)
+ }
+ const animation = new Animation(name, inits)
+ animation.setCostumes(costumes)
+ return animation
+ }
+
+ export(
+ /** Path of directory which contains the sprite's config file */
+ basePath: string
+ ): [RawAnimationConfig, RawCostumeConfig[], Files] {
+ const costumeConfigs: RawCostumeConfig[] = []
+ const files: Files = {}
+ for (const costume of this.costumes) {
+ const [costumeConfig, costumeFiles] = costume.export(basePath)
+ costumeConfigs.push(costumeConfig)
+ Object.assign(files, costumeFiles)
+ }
+ const config: RawAnimationConfig = {
+ from: costumeConfigs[0]?.name,
+ to: costumeConfigs[costumeConfigs.length - 1]?.name,
+ duration: this.duration,
+ anitype: AniType.frame,
+ onStart: this.sound == null ? undefined : { play: this.sound }
+ }
+ return [config, costumeConfigs, files]
+ }
+}
+
+function getCostumeIndex(costumes: Costume[], costume: string | number) {
+ if (typeof costume === 'number') return costume
+ const index = costumes.findIndex((c) => c.name === costume)
+ if (index === -1) throw new Error(`costume ${costume} not found`)
+ return index
+}
diff --git a/spx-gui/src/models/common/asset-name.ts b/spx-gui/src/models/common/asset-name.ts
index 8f450dba0..52e54836c 100644
--- a/spx-gui/src/models/common/asset-name.ts
+++ b/spx-gui/src/models/common/asset-name.ts
@@ -1,7 +1,9 @@
+import type { LocaleMessage } from '@/utils/i18n'
import { keywords, typeKeywords } from '@/utils/spx'
import type { Project } from '../project'
import type { Stage } from '../stage'
import type { Sprite } from '../sprite'
+import type { Animation } from '../animation'
function validateAssetName(name: string) {
if (name === '') return { en: 'The name must not be blank', zh: '名字不可为空' }
@@ -10,6 +12,18 @@ function validateAssetName(name: string) {
en: 'The name is too long (maximum is 100 characters)',
zh: '名字长度超出限制（最多 100 个字符）'
}
+}
+
+function getAssetNameTip(asset: LocaleMessage) {
+ return {
+ en: `The ${asset.en} name should be non-empty string with length no longer than 100.`,
+ zh: `${asset.zh}名称不可为空，长度不超过 100`
+ }
+}
+
+function validateGopIdentifierAssetName(name: string) {
+ const err = validateAssetName(name)
+ if (err != null) return err
// spx code is go+ code, and the asset name will compiled to an identifier of go+
// so asset name rules is depend on the identifier rules of go+.
const regex = /^[\u4e00-\u9fa5a-zA-Z_][\u4e00-\u9fa5a-zA-Z0-9_]*$/
@@ -18,13 +32,19 @@ function validateAssetName(name: string) {
if (keywords.includes(name)) return { en: 'Conflict with keywords', zh: '与关键字冲突' }
}
-export const spriteNameTip = {
- en: 'The sprite name can only contain ASCII letters, digits, and the character _.',
- zh: '精灵名称只能包含英文字母、数字及下划线'
+function getGopIdentifierAssetNameTip(asset: LocaleMessage) {
+ return {
+ en: `The ${asset.en} name can only contain Chineses / English letters, digits, and the character _.`,
+ zh: `${asset.zh}名称只能包含中英文字符、数字及下划线`
+ }
}
+export const spriteNameTip = getGopIdentifierAssetNameTip({ en: 'sprite', zh: '精灵' })
+
export function validateSpriteName(name: string, project: Project | null) {
- const err = validateAssetName(name)
+ // spx will use the sprite's name as identifier for the sprite variable in compiled code,
+ // so it should obey the naming rule of gop identifier
+ const err = validateGopIdentifierAssetName(name)
if (err != null) return err
if (project != null) {
if (project.sprites.find((s) => s.name === name))
@@ -34,32 +54,32 @@ export function validateSpriteName(name: string, project: Project | null) {
}
}
-export const costumeNameTip = {
- en: 'The costume name can only contain ASCII letters, digits, and the character _.',
- zh: '造型名称只能包含英文字母、数字及下划线'
-}
+export const costumeNameTip = getAssetNameTip({ en: 'costume', zh: '造型' })
-export function validateCostumeName(name: string, sprite: Sprite | null) {
+export function validateCostumeName(name: string, parent: Sprite | Animation | null) {
const err = validateAssetName(name)
if (err != null) return err
- if (sprite != null && sprite.costumes.find((c) => c.name === name))
+ if (parent != null && parent.costumes.find((c) => c.name === name))
return { en: `Costume with name ${name} already exists`, zh: '存在同名的造型' }
}
-export const soundNameTip = {
- en: 'The sound name can only contain ASCII letters, digits, and the character _.',
- zh: '声音名称只能包含英文字母、数字及下划线'
+export const animationNameTip = getAssetNameTip({ en: 'animation', zh: '动画' })
+
+export function validateAnimationName(name: string, sprite: Sprite | null) {
+ const err = validateAssetName(name)
+ if (err != null) return err
+ if (sprite != null && sprite.animations.find((a) => a.name === name))
+ return { en: `Animation with name ${name} already exists`, zh: '存在同名的动画' }
}
+export const soundNameTip = getGopIdentifierAssetNameTip({ en: 'sound', zh: '声音' })
+
export function validateSoundName(name: string, project: Project | null) {
// Now same validation logic for sprite & sound
return validateSpriteName(name, project)
}
-export const backdropNameTip = {
- en: 'The backdrop name can only contain ASCII letters, digits, and the character _.',
- zh: '背景名称只能包含英文字母、数字及下划线'
-}
+export const backdropNameTip = getAssetNameTip({ en: 'backdrop', zh: '背景' })
export function validateBackdropName(name: string, stage: Stage | null) {
const err = validateAssetName(name)
@@ -108,14 +128,24 @@ export function ensureValidSpriteName(name: string, project: Project | null) {
return getSpriteName(project, name)
}
-export function getCostumeName(sprite: Sprite | null, base = '') {
+export function getCostumeName(parent: Sprite | Animation | null, base = '') {
base = normalizeAssetName(base, 'camel') || 'costume'
- return getValidName(base, (n) => validateCostumeName(n, sprite) == null)
+ return getValidName(base, (n) => validateCostumeName(n, parent) == null)
+}
+
+export function ensureValidCostumeName(name: string, parent: Sprite | Animation | null) {
+ if (validateCostumeName(name, parent) == null) return name
+ return getCostumeName(parent, name)
+}
+
+export function getAnimationName(sprite: Sprite | null, base = '') {
+ base = normalizeAssetName(base, 'camel') || 'animation'
+ return getValidName(base, (n) => validateAnimationName(n, sprite) == null)
}
-export function ensureValidCostumeName(name: string, sprite: Sprite | null) {
- if (validateCostumeName(name, sprite) == null) return name
- return getCostumeName(sprite, name)
+export function ensureValidAnimationName(name: string, sprite: Sprite | null) {
+ if (validateAnimationName(name, sprite) == null) return name
+ return getAnimationName(sprite, name)
}
export function getSoundName(project: Project | null, base = '') {
diff --git a/spx-gui/src/models/costume.ts b/spx-gui/src/models/costume.ts
index ee3d977bf..368c917c5 100644
--- a/spx-gui/src/models/costume.ts
+++ b/spx-gui/src/models/costume.ts
@@ -7,6 +7,7 @@ import { type Size } from './common'
import type { Sprite } from './sprite'
import { getCostumeName, validateCostumeName } from './common/asset-name'
import { Disposble } from './common/disposable'
+import { Animation } from './animation'
export type CostumeInits = {
x?: number
@@ -21,14 +22,14 @@ export type RawCostumeConfig = CostumeInits & {
}
export class Costume {
- _sprite: Sprite | null = null
- setSprite(sprite: Sprite | null) {
- this._sprite = sprite
+ private parent: Sprite | Animation | null = null
+ setParent(parent: Sprite | Animation | null) {
+ this.parent = parent
}
name: string
setName(name: string) {
- const err = validateCostumeName(name, this._sprite)
+ const err = validateCostumeName(name, this.parent)
if (err != null) throw new Error(`invalid name ${name}: ${err.en}`)
this.name = name
}
@@ -103,7 +104,7 @@ export class Costume {
static load(
{ name, path, ...inits }: RawCostumeConfig,
files: Files,
- /** Path of directory which contains the config file */
+ /** Path of directory which contains the sprite's config file */
basePath: string
) {
if (name == null) throw new Error(`name expected for costume`)
@@ -114,16 +115,18 @@ export class Costume {
}
export(
- /** Path of directory which contains the config file */
+ /** Path of directory which contains the sprite's config file */
basePath: string
): [RawCostumeConfig, Files] {
- const filename = this.name + extname(this.img.name)
+ const name =
+ this.parent instanceof Animation ? this.parent.withCostumeNamePrefix(this.name) : this.name
+ const filename = name + extname(this.img.name)
const config: RawCostumeConfig = {
x: this.x,
y: this.y,
faceRight: this.faceRight,
bitmapResolution: this.bitmapResolution,
- name: this.name,
+ name,
path: filename
}
const files = {
diff --git a/spx-gui/src/models/project/index.ts b/spx-gui/src/models/project/index.ts
index d54d11e0a..13eb8beac 100644
--- a/spx-gui/src/models/project/index.ts
+++ b/spx-gui/src/models/project/index.ts
@@ -262,7 +262,7 @@ export class Project extends Disposble {
// instead we should use the runtime size of component `ProjectRunner`,
// after https://github.com/goplus/builder/issues/584
width: stageConfig.map?.width,
- height: stageConfig.map?.height,
+ height: stageConfig.map?.height
},
zorder: this.zorder
}
diff --git a/spx-gui/src/models/sprite.ts b/spx-gui/src/models/sprite.ts
index 932d78616..4008a2674 100644
--- a/spx-gui/src/models/sprite.ts
+++ b/spx-gui/src/models/sprite.ts
@@ -7,8 +7,14 @@ import { reactive } from 'vue'
import { join } from '@/utils/path'
import { fromText, type Files, fromConfig, toText, toConfig, listDirs, File } from './common/file'
import { Disposble } from './common/disposable'
-import { ensureValidCostumeName, getSpriteName, validateSpriteName } from './common/asset-name'
+import {
+ ensureValidAnimationName,
+ ensureValidCostumeName,
+ getSpriteName,
+ validateSpriteName
+} from './common/asset-name'
import { type RawCostumeConfig, Costume } from './costume'
+import { Animation, type RawAnimationConfig } from './animation'
import type { Project } from './project'
export enum RotationStyle {
@@ -17,28 +23,37 @@ export enum RotationStyle {
leftRight = 'left-right'
}
+export enum State {
+ default = 'default',
+ die = 'die',
+ step = 'step',
+ // not supported by builder:
+ turn = 'turn',
+ glide = 'glide'
+}
+
export type SpriteInits = {
heading?: number
x?: number
y?: number
size?: number
- rotationStyle?: RotationStyle
+ rotationStyle?: string
costumeIndex?: number
currentCostumeIndex?: number // For compatibility
visible?: boolean
isDraggable?: boolean
-
- // Not supported by builder:
- fAnimations?: unknown
- mAnimations?: unknown
- tAnimations?: unknown
+ defaultAnimation?: string
+ animBindings?: Record
}
export type RawSpriteConfig = SpriteInits & {
costumes?: RawCostumeConfig[]
+ fAnimations?: Record
// Not supported by builder:
costumeSet?: unknown
costumeMPSet?: unknown
+ mAnimations?: unknown
+ tAnimations?: unknown
}
export const spriteAssetPath = 'assets/sprites'
@@ -86,9 +101,9 @@ export class Sprite extends Disposble {
}
removeCostume(name: string) {
const idx = this.costumes.findIndex((s) => s.name === name)
- if (idx === -1) throw new Error(`backdrop ${name} not found`)
+ if (idx === -1) throw new Error(`costume ${name} not found`)
const [constume] = this.costumes.splice(idx, 1)
- constume.setSprite(null)
+ constume.setParent(null)
// Maintain current costume's index if possible
if (this.costumeIndex === idx) {
@@ -106,10 +121,43 @@ export class Sprite extends Disposble {
addCostume(costume: Costume) {
const newCostumeName = ensureValidCostumeName(costume.name, this)
costume.setName(newCostumeName)
- costume.setSprite(this)
+ costume.setParent(this)
this.costumes.push(costume)
}
+ animations: Animation[]
+ removeAnimation(name: string) {
+ const idx = this.animations.findIndex((s) => s.name === name)
+ if (idx === -1) throw new Error(`animation ${name} not found`)
+ const [animation] = this.animations.splice(idx, 1)
+ animation.setSprite(null)
+ }
+ /**
+ * Add given animation to sprite.
+ * Note: the animation's name may be altered to avoid conflict
+ */
+ addAnimation(animation: Animation) {
+ const newAnimationName = ensureValidAnimationName(animation.name, this)
+ animation.setName(newAnimationName)
+ animation.setSprite(this)
+ this.animations.push(animation)
+ }
+
+ private animationBindings: Record
+ getAnimationBoundStates(animationName: string) {
+ const states: State[] = []
+ Object.entries(this.animationBindings).forEach(([state, name]) => {
+ if (name === animationName) states.push(state as State)
+ })
+ return states
+ }
+ setAnimationBoundStates(animationName: string, states: State[]) {
+ Object.entries(this.animationBindings).forEach(([state, bound]) => {
+ if (states.includes(state as State)) this.animationBindings[state as State] = animationName
+ else if (bound === animationName) this.animationBindings[state as State] = undefined
+ })
+ }
+
heading: number
setHeading(heading: number) {
this.heading = heading
@@ -150,6 +198,14 @@ export class Sprite extends Disposble {
this.name = name
this.codeFile = codeFile
this.costumes = []
+ this.animations = []
+ this.animationBindings = {
+ [State.default]: inits?.defaultAnimation,
+ [State.die]: inits?.animBindings?.[State.die],
+ [State.step]: inits?.animBindings?.[State.step],
+ [State.turn]: inits?.animBindings?.[State.turn],
+ [State.glide]: inits?.animBindings?.[State.glide]
+ }
this.heading = inits?.heading ?? 0
this.x = inits?.x ?? 0
this.y = inits?.y ?? 0
@@ -158,10 +214,6 @@ export class Sprite extends Disposble {
this.costumeIndex = inits?.costumeIndex ?? inits?.currentCostumeIndex ?? 0
this.visible = inits?.visible ?? false
this.isDraggable = inits?.isDraggable ?? false
-
- for (const field of ['fAnimations', 'mAnimations', 'tAnimations'] as const) {
- if (inits?.[field] != null) console.warn(`unsupported field: ${field} for sprite ${name}`)
- }
return reactive(this) as this
}
@@ -213,6 +265,9 @@ export class Sprite extends Disposble {
costumes: costumeConfigs,
costumeSet,
costumeMPSet,
+ fAnimations: animationConfigs,
+ mAnimations,
+ tAnimations,
...inits
} = (await toConfig(configFile)) as RawSpriteConfig
const codeFile = files[name + '.spx']
@@ -228,6 +283,16 @@ export class Sprite extends Disposble {
console.warn(`unsupported field: costumeMPSet for sprite ${name}`)
else console.warn(`no costume found for sprite: ${name}`)
}
+ if (animationConfigs != null) {
+ const animations = Object.entries(animationConfigs).map(([name, config]) =>
+ Animation.load(name, config!, sprite)
+ )
+ for (const animation of animations) {
+ sprite.addAnimation(animation)
+ }
+ }
+ if (mAnimations != null) console.warn(`unsupported field: mAnimations for sprite ${name}`)
+ if (tAnimations != null) console.warn(`unsupported field: tAnimations for sprite ${name}`)
return sprite
}
@@ -254,6 +319,14 @@ export class Sprite extends Disposble {
costumeConfigs.push(costumeConfig)
Object.assign(files, costumeFiles)
}
+ const animationConfigs: Record = {}
+ for (const a of this.animations) {
+ const [animationConfig, animationCostumesConfigs, animationFiles] = a.export(assetPath)
+ animationConfigs[a.name] = animationConfig
+ costumeConfigs.push(...animationCostumesConfigs)
+ Object.assign(files, animationFiles)
+ }
+ const { [State.default]: defaultAnimation, ...animBindings } = this.animationBindings
const config: RawSpriteConfig = {
heading: this.heading,
x: this.x,
@@ -263,7 +336,10 @@ export class Sprite extends Disposble {
costumeIndex: this.costumeIndex,
visible: this.visible,
isDraggable: this.isDraggable,
- costumes: costumeConfigs
+ costumes: costumeConfigs,
+ fAnimations: animationConfigs,
+ defaultAnimation: defaultAnimation,
+ animBindings: animBindings
}
if (includeCode) {
files[this.codeFileName] = this.codeFile ?? fromText(this.codeFileName, '')
From 7f5e28b4c06ebcab5937c5891da88f3af194b4b8 Mon Sep 17 00:00:00 2001
From: Hanxing Yang
Date: Thu, 27 Jun 2024 16:41:14 +0800
Subject: [PATCH 10/57] Costume pre-processing: split-sprite-sheet (#614)
* costume preprocessing
* details
* typo
---
spx-gui/src/components/asset/index.ts | 56 +-
.../asset/preprocessing/CostumeItem.vue | 65 +++
.../asset/preprocessing/PreprocessModal.vue | 263 +++++++++
.../asset/preprocessing/common/ImgPreview.vue | 85 +++
.../preprocessing/common/ProcessDetail.vue | 77 +++
.../preprocessing/common/ProcessItem.vue | 74 +++
.../asset/preprocessing/common/img-bg.svg | 3 +
.../preprocessing/original-thumbnail.svg | 280 +++++++++
.../split-sprite-sheet/SplitSpriteSheet.vue | 150 +++++
.../split-sprite-sheet/thumbnail.svg | 536 ++++++++++++++++++
.../preprocessing/split-sprite-sheet/utils.ts | 267 +++++++++
.../editor/code-editor/FormatButton.vue | 6 +-
.../preview/stage-viewer/SpriteItem.vue | 22 +-
.../stage-viewer/SpriteTransformer.vue | 8 +-
.../preview/stage-viewer/StageViewer.vue | 2 +-
.../editor/sprite/CostumesEditor.vue | 16 +-
.../src/components/ui/modal/UIFormModal.vue | 6 +-
spx-gui/src/models/common/asset-name.test.ts | 48 +-
spx-gui/src/models/common/asset-name.ts | 13 +-
spx-gui/src/utils/file.ts | 32 +-
spx-gui/src/utils/utils.ts | 20 +-
21 files changed, 1945 insertions(+), 84 deletions(-)
create mode 100644 spx-gui/src/components/asset/preprocessing/CostumeItem.vue
create mode 100644 spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
create mode 100644 spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
create mode 100644 spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
create mode 100644 spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
create mode 100644 spx-gui/src/components/asset/preprocessing/common/img-bg.svg
create mode 100644 spx-gui/src/components/asset/preprocessing/original-thumbnail.svg
create mode 100644 spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
create mode 100644 spx-gui/src/components/asset/preprocessing/split-sprite-sheet/thumbnail.svg
create mode 100644 spx-gui/src/components/asset/preprocessing/split-sprite-sheet/utils.ts
diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index aa5d5cc70..5e14f87f6 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -13,6 +13,7 @@ import { type Project } from '@/models/project'
import AssetLibraryModal from './library/AssetLibraryModal.vue'
import AssetAddModal from './library/AssetAddModal.vue'
import LoadFromScratchModal from './scratch/LoadFromScratchModal.vue'
+import PreprocessModal from './preprocessing/PreprocessModal.vue'
function selectAsset(project: Project, asset: AssetModel | undefined) {
if (asset instanceof Sprite) project.select({ type: 'sprite', name: asset.name })
@@ -51,21 +52,30 @@ export function useLoadFromScratchModal() {
}
export function useAddSpriteFromLocalFile() {
+ const preprocess = useModal(PreprocessModal)
return async function addSpriteFromLocalFile(project: Project) {
- const imgs = await selectImgs()
- const spriteName = imgs.length > 1 ? '' : stripExt(imgs[0].name)
+ const actionMessage = { en: 'Add sprite', zh: '添加精灵' }
+ const nativeFiles = await selectImgs()
+ const files = nativeFiles.map((f) => fromNativeFile(f))
+ const spriteName = files.length > 1 ? '' : stripExt(files[0].name)
const sprite = Sprite.create(spriteName)
- const costumes = await Promise.all(
- imgs.map((img) => {
- const costumeName = imgs.length > 1 ? stripExt(img.name) : ''
- return Costume.create(costumeName, fromNativeFile(img))
- })
- )
+ let costumes: Costume[]
+ if (files.length > 1) {
+ // Now split-sprite-sheet is the only preprocessing method we support, it is meant to be skipped when multiple images are selected.
+ // So we can skip the whole preprocessing modal and directly create costumes. In the future we will support more preprocessing methods,
+ // such as background-elimination, which is meant to be applied even when multiple images are selected. Then we will not skip the preprocessing modal.
+ costumes = await Promise.all(
+ files.map((file) => {
+ return Costume.create(stripExt(file.name), file)
+ })
+ )
+ } else {
+ costumes = await preprocess({ files, actionMessage })
+ }
for (const costume of costumes) {
sprite.addCostume(costume)
}
- const action = { name: { en: 'Add sprite', zh: '添加精灵' } }
- await project.history.doAction(action, async () => {
+ await project.history.doAction({ name: actionMessage }, async () => {
project.addSprite(sprite)
await sprite.autoFit()
})
@@ -74,6 +84,32 @@ export function useAddSpriteFromLocalFile() {
}
}
+export function useAddCostumeFromLocalFile() {
+ const preprocess = useModal(PreprocessModal)
+ return async function addCostumeFromLocalFile(sprite: Sprite, project: Project) {
+ const actionMessage = { en: 'Add costume', zh: '添加造型' }
+ const nativeFiles = await selectImgs()
+ const files = nativeFiles.map((f) => fromNativeFile(f))
+ let costumes: Costume[]
+ if (files.length > 1) {
+ // Now split-sprite-sheet is the only preprocessing method we support, it is meant to be skipped when multiple images are selected.
+ // So we can skip the whole preprocessing modal and directly create costumes. In the future we will support more preprocessing methods,
+ // such as background-elimination, which is meant to be applied even when multiple images are selected. Then we will not skip the preprocessing modal.
+ costumes = await Promise.all(
+ files.map((file) => {
+ return Costume.create(stripExt(file.name), file)
+ })
+ )
+ } else {
+ costumes = await preprocess({ files, actionMessage })
+ }
+ await project.history.doAction({ name: actionMessage }, () => {
+ for (const costume of costumes) sprite.addCostume(costume)
+ sprite.setDefaultCostume(costumes[0].name)
+ })
+ }
+}
+
export function useAddSoundFromLocalFile() {
return async function addSoundFromLocalFile(project: Project) {
const audio = await selectAudio()
diff --git a/spx-gui/src/components/asset/preprocessing/CostumeItem.vue b/spx-gui/src/components/asset/preprocessing/CostumeItem.vue
new file mode 100644
index 000000000..b75e232d0
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/CostumeItem.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
new file mode 100644
index 000000000..8fa53df48
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -0,0 +1,263 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
new file mode 100644
index 000000000..d79daf316
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
new file mode 100644
index 000000000..5b00f1f3d
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
@@ -0,0 +1,77 @@
+
+
+
+ {{ $t({ en: 'Apply', zh: '应用' }) }}
+ {{ $t({ en: 'Cancel', zh: '取消' }) }}
+
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
new file mode 100644
index 000000000..1c0fe5d22
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/asset/preprocessing/common/img-bg.svg b/spx-gui/src/components/asset/preprocessing/common/img-bg.svg
new file mode 100644
index 000000000..2e16f6783
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/common/img-bg.svg
@@ -0,0 +1,3 @@
+
diff --git a/spx-gui/src/components/asset/preprocessing/original-thumbnail.svg b/spx-gui/src/components/asset/preprocessing/original-thumbnail.svg
new file mode 100644
index 000000000..ce61465c0
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/original-thumbnail.svg
@@ -0,0 +1,280 @@
+
diff --git a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
new file mode 100644
index 000000000..c9f8ee060
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
@@ -0,0 +1,150 @@
+
+
+
+ {{ $t({ en: 'Split sprite sheet', zh: '切分精灵表' }) }}
+
+ {{ $t({ en: 'Rows', zh: '行数' }) }}:
+
+
+ {{ $t({ en: 'Columns', zh: '列数' }) }}:
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/thumbnail.svg b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/thumbnail.svg
new file mode 100644
index 000000000..1850f45d3
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/thumbnail.svg
@@ -0,0 +1,536 @@
+
diff --git a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/utils.ts b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/utils.ts
new file mode 100644
index 000000000..30a859731
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/utils.ts
@@ -0,0 +1,267 @@
+export type Point = [x: number, y: number]
+export type Color = [r: number, g: number, b: number, a: number]
+
+function getPixel(imageData: ImageData, [x, y]: Point): Color {
+ const offset = (imageData.width * y + x) * 4
+ return [
+ imageData.data[offset],
+ imageData.data[offset + 1],
+ imageData.data[offset + 2],
+ imageData.data[offset + 3]
+ ]
+}
+
+function setPixel(imageData: ImageData, [x, y]: Point, color: Color) {
+ const offset = (imageData.width * y + x) * 4
+ imageData.data.set(color, offset)
+}
+
+function equalsColor(a: Color, b: Color, threshold = 10) {
+ return (
+ Math.abs(a[0] - b[0]) < threshold &&
+ Math.abs(a[1] - b[1]) < threshold &&
+ Math.abs(a[2] - b[2]) < threshold &&
+ Math.abs(a[3] - b[3]) < threshold
+ )
+}
+
+export type Region = {
+ startX: number
+ startY: number
+ endX: number
+ endY: number
+}
+
+function hasOverlap(a: Region, b: Region) {
+ return a.startX <= b.endX && a.endX >= b.startX && a.startY <= b.endY && a.endY >= b.startY
+}
+
+function growRegion(imageData: ImageData, satrtPoint: Point, bgColor: Color): Region {
+ const { width, height } = imageData
+ const [startX, startY] = satrtPoint
+ const stack = [[startX, startY]]
+ const rect: Region = {
+ startX: startX,
+ startY: startY,
+ endX: startX,
+ endY: startY
+ }
+ while (stack.length > 0) {
+ const [x, y] = stack.pop()!
+ setPixel(imageData, [x, y], bgColor)
+ if (x < rect.startX) rect.startX = x
+ if (x > rect.endX) rect.endX = x
+ if (y < rect.startY) rect.startY = y
+ if (y > rect.endY) rect.endY = y
+ ;(
+ [
+ [x - 1, y - 1],
+ [x - 1, y],
+ [x - 1, y + 1],
+ [x, y - 1],
+ [x, y + 1],
+ [x + 1, y - 1],
+ [x + 1, y],
+ [x + 1, y + 1]
+ ] satisfies Point[]
+ ).forEach((p) => {
+ if (p[0] < 0 || p[0] >= width || p[1] < 0 || p[1] >= height) return
+ if (equalsColor(getPixel(imageData, p), bgColor)) return
+ stack.push(p)
+ })
+ }
+ return rect
+}
+
+function* getRegions(imageData: ImageData, bgColor: Color) {
+ const { width, height } = imageData
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const color = getPixel(imageData, [x, y])
+ if (equalsColor(color, bgColor)) {
+ continue
+ }
+ const region = growRegion(imageData, [x, y], bgColor)
+ yield region
+ }
+ }
+}
+
+function mergeRegions(regions: Region[]) {
+ const mergedRects: Region[] = []
+ for (let i = 0; i < regions.length; i++) {
+ const region = { ...regions[i] }
+ let toMerge: Region | null = null
+ for (const mergedRect of mergedRects) {
+ if (hasOverlap(mergedRect, region)) {
+ toMerge = mergedRect
+ break
+ }
+ }
+ if (toMerge != null) {
+ toMerge.startX = Math.min(toMerge.startX, region.startX)
+ toMerge.startY = Math.min(toMerge.startY, region.startY)
+ toMerge.endX = Math.max(toMerge.endX, region.endX)
+ toMerge.endY = Math.max(toMerge.endY, region.endY)
+ } else {
+ mergedRects.push(region)
+ }
+ }
+ return mergedRects
+}
+
+function getBgColor(data: ImageData) {
+ // 1px offset for better result (sometimes there's a thin border around the sprite)
+ return getPixel(data, [1, 1])
+}
+
+export type ExtractYieldedTypeSize = {
+ type: 'size'
+ width: number
+ height: number
+}
+
+export type ExtractYieldedTypeBgColor = {
+ type: 'bgColor'
+ color: Color
+}
+
+export type ExtractYieldedTypeRect = {
+ type: 'rect'
+ rect: Region
+}
+
+export type ExtractYieldedTypeRects = {
+ type: 'rects'
+ rects: Region[]
+}
+
+export type ExtractYieldedTypeMergedRects = {
+ type: 'mergedRects'
+ rects: Region[]
+}
+
+export type RowColNum = {
+ rowNum: number
+ colNum: number
+}
+
+export type ExtractYieldedTypeRowCol = {
+ type: 'rowCol'
+} & RowColNum
+
+type ExtractYielded =
+ | ExtractYieldedTypeSize
+ | ExtractYieldedTypeBgColor
+ | ExtractYieldedTypeRect
+ | ExtractYieldedTypeRects
+ | ExtractYieldedTypeMergedRects
+ | ExtractYieldedTypeRowCol
+
+export async function* recognizeSpriteGrid(img: HTMLImageElement): AsyncGenerator {
+ const maxCanvasSize = 1000 * 1000 // to avoid performance issue
+ const scale = Math.min(Math.sqrt(maxCanvasSize / (img.naturalWidth * img.naturalHeight)), 1)
+ const size = { width: img.naturalWidth * scale, height: img.naturalHeight * scale }
+ yield { type: 'size', ...size }
+
+ const canvas = new OffscreenCanvas(size.width, size.height)
+ const ctx = canvas.getContext('2d')!
+ ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height)
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+ const bgColor = getBgColor(imageData) // TODO: allow caller to adjust color
+ yield { type: 'bgColor', color: bgColor }
+
+ const rects: Region[] = []
+ for (const rect of getRegions(imageData, bgColor)) {
+ rects.push(rect)
+ yield { type: 'rect', rect }
+ }
+
+ yield { type: 'rects', rects }
+
+ let mergedRects = rects
+ // eslint-disable-next-line no-constant-condition
+ while (true) {
+ const newMergedRects = mergeRegions(mergedRects)
+ if (newMergedRects.length === mergedRects.length) break
+ mergedRects = newMergedRects
+ }
+
+ yield { type: 'mergedRects', rects: mergedRects }
+
+ const rectRows: Region[][] = []
+ let rectRow: Region[] = []
+ for (let i = 0; i < mergedRects.length; i++) {
+ const rect = mergedRects[i]
+ const prevRect = mergedRects[i - 1]
+ if (prevRect == null || rect.startY < prevRect.endY) {
+ rectRow.push(rect)
+ continue
+ }
+ rectRows.push(rectRow)
+ rectRow = [rect]
+ }
+ rectRows.push(rectRow)
+ const colNum = Math.max(...rectRows.map((row) => row.length))
+ const rowNum = rectRows.length
+ yield { type: 'rowCol', rowNum, colNum }
+}
+
+export type CutOptions = RowColNum & {
+ bgColor: Color
+ mimeType: string
+}
+
+export async function cutGrid(
+ img: HTMLImageElement,
+ { rowNum, colNum, bgColor, mimeType }: CutOptions
+) {
+ const rows: Blob[][] = await Promise.all(
+ Array.from({ length: rowNum }).map(async (_, rowIndex) => {
+ const row = await Promise.all(
+ Array.from({ length: colNum }).map((_, colIndex) =>
+ cutCell(img, { rowNum, colNum, bgColor, mimeType }, { rowIndex, colIndex })
+ )
+ )
+ return row.filter((blob) => blob != null) as Blob[]
+ })
+ )
+ return rows
+}
+
+type CellIndex = {
+ rowIndex: number
+ colIndex: number
+}
+
+function cutCell(
+ img: HTMLImageElement,
+ { rowNum, colNum, bgColor, mimeType }: CutOptions,
+ { rowIndex, colIndex }: CellIndex
+) {
+ const rectSize = { width: img.naturalWidth / colNum, height: img.naturalHeight / rowNum }
+ const canvas = new OffscreenCanvas(rectSize.width, rectSize.height)
+ const ctx = canvas.getContext('2d')!
+ ctx.drawImage(
+ img,
+ rectSize.width * colIndex,
+ rectSize.height * rowIndex,
+ rectSize.width,
+ rectSize.height,
+ 0,
+ 0,
+ canvas.width,
+ canvas.height
+ )
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+ for (let y = 0; y < canvas.height; y++) {
+ for (let x = 0; x < canvas.width; x++) {
+ const color = getPixel(imageData, [x, y])
+ // filter out empty grid
+ if (!equalsColor(color, bgColor)) {
+ return canvas.convertToBlob({ type: mimeType })
+ }
+ }
+ }
+ return null
+}
diff --git a/spx-gui/src/components/editor/code-editor/FormatButton.vue b/spx-gui/src/components/editor/code-editor/FormatButton.vue
index 240835427..50585b140 100644
--- a/spx-gui/src/components/editor/code-editor/FormatButton.vue
+++ b/spx-gui/src/components/editor/code-editor/FormatButton.vue
@@ -1,9 +1,5 @@
-
+
{{ $t({ en: 'Format', zh: '格式化' }) }}
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
index 6db913bcc..c68763417 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
@@ -20,7 +20,7 @@ import { computed, defineProps, onMounted, ref, watchEffect } from 'vue'
import type { KonvaEventObject } from 'konva/lib/Node'
import type { Sprite } from '@/models/sprite'
import type { Size } from '@/models/common'
-import { useImgFile } from '@/utils/file'
+import { useFileImg } from '@/utils/file'
import { useEditorCtx } from '../../EditorContextProvider.vue'
import { round } from '@/utils/utils'
import type { Action } from '@/models/project'
@@ -35,28 +35,12 @@ const nodeRef = ref()
const editorCtx = useEditorCtx()
const costume = computed(() => props.sprite.defaultCostume)
const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
-const [image] = useImgFile(() => costume.value?.img)
+const [image] = useFileImg(() => costume.value?.img)
watchEffect((onCleanup) => {
const spriteName = props.sprite.name
- props.spritesReadyMap.set(spriteName, false)
+ props.spritesReadyMap.set(spriteName, image.value != null)
onCleanup(() => props.spritesReadyMap.delete(spriteName))
-
- const img = image.value
- if (img == null) return
- function handleImageLoad() {
- // We need to notify event ready for SpriteTransformer (to get correct node size)
- props.spritesReadyMap.set(spriteName, true)
- }
- if (img.complete) {
- handleImageLoad()
- return
- }
- img.addEventListener('load', handleImageLoad)
- onCleanup(() => {
- props.spritesReadyMap.delete(spriteName)
- img.removeEventListener('load', handleImageLoad)
- })
})
onMounted(() => {
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
index c2be01741..cf1fac5b6 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
@@ -13,14 +13,13 @@
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index 387e876d7..dc18737f7 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -20,7 +20,7 @@
/>
-
diff --git a/spx-gui/src/components/editor/sprite/CostumesEditor.vue b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
index 43c57aedf..75a0f8506 100644
--- a/spx-gui/src/components/editor/sprite/CostumesEditor.vue
+++ b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
@@ -25,11 +25,9 @@
import { computed } from 'vue'
import { UIMenu, UIMenuItem } from '@/components/ui'
import { useMessageHandle } from '@/utils/exception'
-import { selectImg } from '@/utils/file'
-import { fromNativeFile } from '@/models/common/file'
import type { Sprite } from '@/models/sprite'
import { Costume } from '@/models/costume'
-import { stripExt } from '@/utils/path'
+import { useAddCostumeFromLocalFile } from '@/components/asset'
import EditorList from '../common/EditorList.vue'
import CostumeItem from './CostumeItem.vue'
import CostumeDetail from './CostumeDetail.vue'
@@ -47,17 +45,9 @@ function handleSelect(costume: Costume) {
editorCtx.project.history.doAction(action, () => props.sprite.setDefaultCostume(costume.name))
}
+const addFromLocalFile = useAddCostumeFromLocalFile()
const handleAddFromLocalFile = useMessageHandle(
- async () => {
- const img = await selectImg()
- const file = fromNativeFile(img)
- const costume = await Costume.create(stripExt(img.name), file)
- const action = { name: { en: 'Add costume', zh: '添加造型' } }
- await editorCtx.project.history.doAction(action, () => {
- props.sprite.addCostume(costume)
- props.sprite.setDefaultCostume(costume.name)
- })
- },
+ () => addFromLocalFile(props.sprite, editorCtx.project),
{ en: 'Failed to add from local file', zh: '从本地文件添加失败' }
).fn
diff --git a/spx-gui/src/components/ui/modal/UIFormModal.vue b/spx-gui/src/components/ui/modal/UIFormModal.vue
index edd45eb9b..11da99715 100644
--- a/spx-gui/src/components/ui/modal/UIFormModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFormModal.vue
@@ -10,13 +10,14 @@
+
+ {{ $t({ en: 'Duration', zh: '时长' }) }}:
+ {{ $t({ en: 's', zh: '秒' }) }}
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
new file mode 100644
index 000000000..b5348fe54
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/animation/sound/SoundItem.vue b/spx-gui/src/components/editor/sprite/animation/sound/SoundItem.vue
new file mode 100644
index 000000000..756f75f1a
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/sound/SoundItem.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
new file mode 100644
index 000000000..c743ce3b4
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/animation/state/default.svg b/spx-gui/src/components/editor/sprite/animation/state/default.svg
new file mode 100644
index 000000000..8bd52b83e
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/default.svg
@@ -0,0 +1,3 @@
+
diff --git a/spx-gui/src/components/editor/sprite/animation/state/die.svg b/spx-gui/src/components/editor/sprite/animation/state/die.svg
new file mode 100644
index 000000000..fc34ebd6a
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/die.svg
@@ -0,0 +1,3 @@
+
diff --git a/spx-gui/src/components/editor/sprite/animation/state/step.svg b/spx-gui/src/components/editor/sprite/animation/state/step.svg
new file mode 100644
index 000000000..505b76d51
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/state/step.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/spx-gui/src/components/ui/UIBlockItem.vue b/spx-gui/src/components/ui/UIBlockItem.vue
new file mode 100644
index 000000000..e892b271b
--- /dev/null
+++ b/spx-gui/src/components/ui/UIBlockItem.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 3db000dc7..ff583331a 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -181,4 +181,11 @@ h6 {
button:focus {
outline: 2px solid var(--ui-color-primary-700);
}
+
+// vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui.
+// It causes pointer behavior issues in popup content. For example, a svg in a `visibility: hidden` element will still be clickable.
+// So we override it here to fix the issue. See details in https://github.com/07akioni/vueuc/issues/314
+.v-binder-follower-content > * {
+ pointer-events: initial;
+}
diff --git a/spx-gui/src/components/ui/UIDropdown.vue b/spx-gui/src/components/ui/UIDropdown.vue
index 31cb668c5..e563c5dde 100644
--- a/spx-gui/src/components/ui/UIDropdown.vue
+++ b/spx-gui/src/components/ui/UIDropdown.vue
@@ -12,6 +12,7 @@
:style="{ marginTop: offset.y + 'px', marginLeft: offset.x + 'px' }"
raw
@update:show="(v) => emit('update:visible', v)"
+ @clickoutside="handleClickOutside"
>
>()
+
+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) {
nPopoverRef.value?.setShow(visible)
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index fa2bf48b6..09bd23fb3 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -29,6 +29,9 @@ import share from './share.svg?raw'
import arrowAlt from './arrow-alt.svg?raw'
import doubleArrowDown from './double-arrow-down.svg?raw'
import clock from './clock.svg?raw'
+import timer from './timer.svg?raw'
+import status from './status.svg?raw'
+import sound from './sound.svg?raw'
const typeIconMap = {
file,
@@ -54,7 +57,10 @@ const typeIconMap = {
share,
arrowAlt,
doubleArrowDown,
- clock
+ clock,
+ timer,
+ status,
+ sound
}
export type Type = keyof typeof typeIconMap
diff --git a/spx-gui/src/components/ui/icons/sound.svg b/spx-gui/src/components/ui/icons/sound.svg
new file mode 100644
index 000000000..28b3aa4d0
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/sound.svg
@@ -0,0 +1,3 @@
+
diff --git a/spx-gui/src/components/ui/icons/status.svg b/spx-gui/src/components/ui/icons/status.svg
new file mode 100644
index 000000000..334d5f9c5
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/status.svg
@@ -0,0 +1,3 @@
+
diff --git a/spx-gui/src/components/ui/icons/timer.svg b/spx-gui/src/components/ui/icons/timer.svg
new file mode 100644
index 000000000..17c9b0f56
--- /dev/null
+++ b/spx-gui/src/components/ui/icons/timer.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index affc6a070..f543af627 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -6,7 +6,7 @@ export { default as UIIconButton } from './UIIconButton.vue'
export { default as UIDropdown } from './UIDropdown.vue'
export { default as UITooltip } from './UITooltip.vue'
export { UIMenu, UIMenuGroup, UIMenuItem } from './menu'
-export { default as UIIcon } from './icons/UIIcon.vue'
+export { default as UIIcon, type Type as IconType } from './icons/UIIcon.vue'
export * from './form'
export { default as UITextInput } from './UITextInput.vue'
export { default as UINumberInput } from './UINumberInput.vue'
@@ -27,8 +27,10 @@ export { default as UIEmpty } from './empty/UIEmpty.vue'
export { default as UIError } from './error/UIError.vue'
export { default as UIImg } from './UIImg.vue'
export { default as UICornerIcon } from './UICornerIcon.vue'
+export { default as UIBlockItem } from './UIBlockItem.vue'
export * from './tab'
export { default as UICode } from './UICode.vue'
export { default as UIButtonGroup } from './UIButtonGroup.vue'
export { default as UIButtonGroupItem } from './UIButtonGroupItem.vue'
export { default as UIDropdownWithTooltip } from './UIDropdownWithTooltip.vue'
+export { isInPopup } from './utils'
diff --git a/spx-gui/src/components/ui/modal/UIDropdownModal.vue b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
new file mode 100644
index 000000000..7655abec2
--- /dev/null
+++ b/spx-gui/src/components/ui/modal/UIDropdownModal.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/ui/modal/index.ts b/spx-gui/src/components/ui/modal/index.ts
index 11a9cc783..313325841 100644
--- a/spx-gui/src/components/ui/modal/index.ts
+++ b/spx-gui/src/components/ui/modal/index.ts
@@ -3,3 +3,4 @@ export { default as UISearchableModal } from './UISearchableModal.vue'
export { default as UIModalProvider, useModal } from './UIModalProvider.vue'
export { default as UIFullScreenModal } from './UIFullScreenModal.vue'
export { default as UIModalClose } from './UIModalClose.vue'
+export { default as UIDropdownModal } from './UIDropdownModal.vue'
diff --git a/spx-gui/src/components/ui/utils/index.ts b/spx-gui/src/components/ui/utils/index.ts
index e0aa4d099..ba02e8acb 100644
--- a/spx-gui/src/components/ui/utils/index.ts
+++ b/spx-gui/src/components/ui/utils/index.ts
@@ -16,3 +16,13 @@ export function useRootContainer() {
export function usePopupContainer() {
return useRootContainer()
}
+
+/** If given target in any popup content */
+export function isInPopup(target: HTMLElement | null) {
+ let el = target
+ while (el != null) {
+ if (el.classList.contains('n-popover') || el.classList.contains('n-modal')) return true
+ el = el.parentElement
+ }
+ return false
+}
diff --git a/spx-gui/src/models/animation.ts b/spx-gui/src/models/animation.ts
index a0e2bfc34..958f136e0 100644
--- a/spx-gui/src/models/animation.ts
+++ b/spx-gui/src/models/animation.ts
@@ -125,12 +125,7 @@ export class Animation {
* Create instance with default inits
* Note that the "default" means default behavior for builder, not the default behavior of spx
*/
- static create(
- nameBase: string,
- sprite: Sprite,
- costumes: Costume[],
- inits?: AnimationInits
- ) {
+ static create(nameBase: string, sprite: Sprite, costumes: Costume[], inits?: AnimationInits) {
for (const costume of costumes) {
sprite.removeCostume(costume.name)
}
diff --git a/spx-gui/src/models/common/asset-name.test.ts b/spx-gui/src/models/common/asset-name.test.ts
index 762e832fd..35dcd6de1 100644
--- a/spx-gui/src/models/common/asset-name.test.ts
+++ b/spx-gui/src/models/common/asset-name.test.ts
@@ -1,5 +1,10 @@
import { describe, it, expect } from 'vitest'
-import { getSoundName, getSpriteName, normalizeAssetName, normalizeGopIdentifierAssetName } from './asset-name'
+import {
+ getSoundName,
+ getSpriteName,
+ normalizeAssetName,
+ normalizeGopIdentifierAssetName
+} from './asset-name'
import { Project } from '../project'
import { Sprite } from '../sprite'
import { Sound } from '../sound'
diff --git a/spx-gui/src/utils/audio.ts b/spx-gui/src/utils/audio.ts
index 68987fc36..ddb4dae14 100644
--- a/spx-gui/src/utils/audio.ts
+++ b/spx-gui/src/utils/audio.ts
@@ -67,7 +67,10 @@ function audioBufferToWav(audioBuffer: AudioBuffer): ArrayBuffer {
return buffer
}
-export const formatDuration = (durationInSeconds: number | null | undefined) => {
+export const formatDuration = (
+ durationInSeconds: number | null | undefined,
+ fractionDigits = 1
+) => {
if (
durationInSeconds === null ||
durationInSeconds === undefined ||
@@ -75,7 +78,7 @@ export const formatDuration = (durationInSeconds: number | null | undefined) =>
) {
return ''
}
- return durationInSeconds.toFixed(1) + 's'
+ return durationInSeconds.toFixed(fractionDigits) + 's'
}
export const useAudioDuration = (audio: () => string | Blob | null) => {
From 3efd54ae626e3447620b9396033a28a05ea4aa20 Mon Sep 17 00:00:00 2001
From: Hanxing Yang
Date: Tue, 2 Jul 2024 15:47:34 +0800
Subject: [PATCH 16/57] fix cancelled warning in console (#625)
---
.../src/components/editor/EditorHomepage.vue | 13 +--
.../panels/sprite/SpriteBasicConfig.vue | 15 ++--
.../components/editor/sound/SoundEditor.vue | 14 ++--
.../editor/sprite/CostumeDetail.vue | 17 ++--
.../editor/stage/BackdropDetail.vue | 15 ++--
.../components/project/ProjectCreateModal.vue | 15 ++--
spx-gui/src/components/project/index.ts | 80 ++++++++-----------
spx-gui/src/components/top-nav/TopNav.vue | 42 +++++++---
spx-gui/src/main.ts | 9 +--
spx-gui/src/utils/exception.ts | 17 +++-
10 files changed, 129 insertions(+), 108 deletions(-)
diff --git a/spx-gui/src/components/editor/EditorHomepage.vue b/spx-gui/src/components/editor/EditorHomepage.vue
index 7349dfee4..543600e2f 100644
--- a/spx-gui/src/components/editor/EditorHomepage.vue
+++ b/spx-gui/src/components/editor/EditorHomepage.vue
@@ -47,7 +47,7 @@ import TopNav from '@/components/top-nav/TopNav.vue'
import ProjectList from '@/components/project/ProjectList.vue'
import { useCreateProject } from '@/components/project'
import { getProjectEditorRoute } from '@/router'
-import { useQuery } from '@/utils/exception'
+import { useMessageHandle, useQuery } from '@/utils/exception'
import EditorContextProvider from './EditorContextProvider.vue'
import ProjectEditor from './ProjectEditor.vue'
import { clear } from '@/models/common/local'
@@ -258,10 +258,13 @@ function handleSelected(project: ProjectData) {
openProject(project.name)
}
-async function handleCreate() {
- const newProject = await createProject()
- openProject(newProject.name)
-}
+const handleCreate = useMessageHandle(
+ async () => {
+ const newProject = await createProject()
+ openProject(newProject.name)
+ },
+ { en: 'Failed to create project', zh: '创建项目失败' }
+).fn
diff --git a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
new file mode 100644
index 000000000..ea40fb3b4
--- /dev/null
+++ b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sound/VolumeSlider.vue b/spx-gui/src/components/editor/sound/VolumeSlider.vue
index 72d65ea87..07b37801c 100644
--- a/spx-gui/src/components/editor/sound/VolumeSlider.vue
+++ b/spx-gui/src/components/editor/sound/VolumeSlider.vue
@@ -1,6 +1,6 @@
+
+ {{
+ $t({ en: 'Group costumes as animation', zh: '将造型合并为动画' })
+ }}
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/AnimationItem.vue b/spx-gui/src/components/editor/sprite/AnimationItem.vue
new file mode 100644
index 000000000..2c32befbe
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/AnimationItem.vue
@@ -0,0 +1,58 @@
+
+
+ {{ animation.name }}
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
new file mode 100644
index 000000000..281b6c281
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/AnimationRenameModal.vue b/spx-gui/src/components/editor/sprite/AnimationRenameModal.vue
new file mode 100644
index 000000000..9446730ad
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/AnimationRenameModal.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/CheckerboardBackground.vue b/spx-gui/src/components/editor/sprite/CheckerboardBackground.vue
new file mode 100644
index 000000000..4668df8fd
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/CheckerboardBackground.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 184a7d772..1ec3b04cc 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -1,6 +1,7 @@
@@ -15,6 +16,7 @@ import type { Sprite } from '@/models/sprite'
import EditorItemDetail from '../common/EditorItemDetail.vue'
import CostumeRenameModal from './CostumeRenameModal.vue'
import { useEditorCtx } from '../EditorContextProvider.vue'
+import CheckerboardBackground from './CheckerboardBackground.vue'
const props = defineProps<{
costume: Costume
@@ -42,8 +44,18 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
width: 100%;
flex: 1 1 0;
border-radius: 8px;
- background-image: url(./costume-bg.svg);
+ position: relative;
+ overflow: hidden;
}
+
+.background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+
.img {
width: 100%;
height: 100%;
diff --git a/spx-gui/src/components/editor/sprite/SpriteEditor.vue b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
index 98db39ecd..66ff9b605 100644
--- a/spx-gui/src/components/editor/sprite/SpriteEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
@@ -3,6 +3,7 @@
{{ $t({ en: 'Code', zh: '代码' }) }}
{{ $t({ en: 'Costumes', zh: '造型' }) }}
+ {{ $t({ en: 'Animation', zh: '动画' }) }}
Date: Thu, 4 Jul 2024 08:35:12 +0800
Subject: [PATCH 20/57] hide onTouched (#632)
---
.../editor/code-editor/code-text-editor/tools/index.ts | 2 +-
.../editor/code-editor/code-text-editor/tools/spx.ts | 4 +++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
index feba55b6f..7b7f2b105 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
@@ -25,7 +25,7 @@ export const eventCategory: ToolCategory = {
},
{
label: { en: 'Sensing Events', zh: '感知事件' },
- tools: [spx.onClick, spx.onKey, spx.onAnyKey, spx.onTouched]
+ tools: [spx.onClick, spx.onKey, spx.onAnyKey]
},
{
label: { en: 'Motion Events', zh: '运动事件' },
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
index 22c125f6c..8c4234425 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
@@ -32,6 +32,8 @@ export const onCloned: Tool = {
}
}
+// For now `onTouched` is not exposed to the user
+// As it behaves strangely in the current implementation, see details in https://github.com/goplus/spx/issues/298
export const onTouched: Tool = {
type: ToolType.method,
callEffect: ToolCallEffect.listen,
@@ -54,7 +56,7 @@ export const onTouched: Tool = {
},
{
desc: { en: 'By some given sprites', zh: '指定的某些精灵' },
- sample: 'onTouched [S1, S2] => {}',
+ sample: 'onTouched [S1, S2], => {}',
insertText: 'onTouched [${1:}], => {\n\t${2}\n}'
}
]
From d534306ab08a2c4dd3c2fb2effb872e465627d45 Mon Sep 17 00:00:00 2001
From: Hanxing Yang
Date: Thu, 4 Jul 2024 08:58:21 +0800
Subject: [PATCH 21/57] Update code-editor for animation (#629)
* update code-editor for animation
* update costume tools
* fix costume add
---
.../asset/preprocessing/PreprocessModal.vue | 10 ++---
.../code-text-editor/tools/index.ts | 28 +++++++++++-
.../code-editor/code-text-editor/tools/spx.ts | 45 ++++++++++++++++---
3 files changed, 67 insertions(+), 16 deletions(-)
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index 8fa53df48..97f19b860 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -171,13 +171,11 @@ const selectedCostumes = shallowReactive([])
/** Update costumes based on current process output */
async function updateCostumes(files: File[]) {
- costumes.value = []
- selectedCostumes.splice(0)
const newCostumes = await Promise.all(
files.map((file) => Costume.create(stripExt(file.name), file))
)
costumes.value = newCostumes
- selectedCostumes.push(...newCostumes)
+ selectedCostumes.splice(0, selectedCostumes.length, ...newCostumes)
}
function isCostumeSelected(costume: Costume) {
@@ -196,10 +194,8 @@ function handleConfirm() {
watch(
() => props.files,
- async (files) => {
- cancelMethod(supportedMethods[0].value)
- await updateCostumes(files)
- },
+ // The first method cancelled, all methods cancelled
+ () => cancelMethod(supportedMethods[0].value),
{ immediate: true }
)
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
index 7b7f2b105..83578ce0f 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/index.ts
@@ -51,7 +51,7 @@ export const motionCategory: ToolCategory = {
groups: [
{
label: { en: 'Move', zh: '移动' },
- tools: [spx.move, spx.goto, spx.glide]
+ tools: [spx.step, spx.move, spx.goto, spx.glide]
},
{
label: { en: 'Position', zh: '位置' },
@@ -103,7 +103,12 @@ export const lookCategory: ToolCategory = {
},
{
label: { en: 'Costume', zh: '造型' },
- tools: [spx.costumeName, spx.costumeIndex, spx.setCostume, spx.nextCostume, spx.prevCostume]
+ // index-related tools are excluded, as they are not recommended to use (animation is prefered)
+ tools: [spx.costumeName, spx.setCostume]
+ },
+ {
+ label: { en: 'Animation', zh: '动画' },
+ tools: [spx.animate]
},
{
label: { en: 'Backdrop', zh: '背景' },
@@ -258,6 +263,25 @@ export function getVariableCategory(project: Project): ToolCategory {
})
if (project.selectedSprite != null) {
+ groups.push({
+ label: {
+ en: `Animations of "${project.selectedSprite.name}"`,
+ zh: `${project.selectedSprite.name} 的动画`
+ },
+ tools: project.selectedSprite.animations.map((animation) => {
+ const keyword = `"${animation.name}"`
+ return {
+ type: ToolType.variable,
+ target: ToolContext.sprite,
+ keyword,
+ desc: { en: `Animation "${animation.name}"`, zh: `动画 ${animation.name}` },
+ usage: {
+ sample: keyword,
+ insertText: keyword
+ }
+ }
+ })
+ })
groups.push({
label: {
en: `Costumes of "${project.selectedSprite.name}"`,
diff --git a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
index 8c4234425..2be10c91a 100644
--- a/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
+++ b/spx-gui/src/components/editor/code-editor/code-text-editor/tools/spx.ts
@@ -97,7 +97,10 @@ export const die: Tool = {
callEffect: ToolCallEffect.write,
target: ToolContext.sprite,
keyword: 'die',
- desc: { en: 'Let current sprite die', zh: '让当前精灵死亡' },
+ desc: {
+ en: 'Let current sprite die. Animation bound to state "die" will be played.',
+ zh: '让当前精灵死亡，绑定到“死亡”状态的动画会被播放'
+ },
usage: {
sample: 'die',
insertText: 'die'
@@ -170,12 +173,13 @@ export const setCostume: Tool = {
target: ToolContext.sprite,
keyword: 'setCostume',
desc: {
- en: 'Set the current costume by specifying name or index',
- zh: '通过指定名称或索引设置当前造型'
+ en: 'Set the current costume by specifying name',
+ zh: '通过指定名称设置当前造型'
},
+ // index-related usages are excluded, as they are not recommended to use (animation is prefered)
usage: {
- sample: 'setCostume 0',
- insertText: 'setCostume ${1:nameOrIndex}'
+ sample: 'setCostume "happy"',
+ insertText: 'setCostume ${1:name}'
}
}
@@ -203,6 +207,18 @@ export const prevCostume: Tool = {
}
}
+export const animate: Tool = {
+ type: ToolType.method,
+ callEffect: ToolCallEffect.write,
+ target: ToolContext.sprite,
+ keyword: 'animate',
+ desc: { en: 'Play animation with given name', zh: '通过指定名称播放动画' },
+ usage: {
+ sample: 'animate "jump"',
+ insertText: 'animate ${1:name}'
+ }
+}
+
export const say: Tool = {
type: ToolType.method,
callEffect: ToolCallEffect.write,
@@ -263,10 +279,25 @@ export const move: Tool = {
callEffect: ToolCallEffect.write,
target: ToolContext.sprite,
keyword: 'move',
- desc: { en: 'Move given steps, toward current heading', zh: '向当前朝向移动指定的步数' },
+ desc: { en: 'Move given distance, toward current heading', zh: '向当前朝向移动指定的距离' },
usage: {
sample: 'move 10',
- insertText: 'move ${1:steps}'
+ insertText: 'move ${1:distance}'
+ }
+}
+
+export const step: Tool = {
+ type: ToolType.method,
+ callEffect: ToolCallEffect.write,
+ target: ToolContext.sprite,
+ keyword: 'step',
+ desc: {
+ en: 'Step given distance, toward current heading. Animation bound to state "step" will be played',
+ zh: '向当前朝向行走指定的距离，绑定到“行走”状态的动画会被播放'
+ },
+ usage: {
+ sample: 'step 10',
+ insertText: 'step ${1:distance}'
}
}
From 13d851c6fa1e72d3700d0f44bda3f1ce76990c31 Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Thu, 4 Jul 2024 12:21:13 +0800
Subject: [PATCH 22/57] Preload frames & audio / removal modal (#633)
* feat: remove costume & preload frames
* fix: use ref for muted
---
.../editor/sprite/AnimationItem.vue | 16 ++--
.../editor/sprite/AnimationRemoveModal.vue | 34 ++++++--
.../sprite/animation/AnimationPlayer.vue | 81 +++++++++++--------
.../editor/sprite/animation/MuteSwitch.vue | 9 +--
4 files changed, 91 insertions(+), 49 deletions(-)
diff --git a/spx-gui/src/components/editor/sprite/AnimationItem.vue b/spx-gui/src/components/editor/sprite/AnimationItem.vue
index 2c32befbe..645d31506 100644
--- a/spx-gui/src/components/editor/sprite/AnimationItem.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationItem.vue
@@ -13,7 +13,7 @@
From 6003a259f75a313b849cd8a6ce7227aa0327ee3a Mon Sep 17 00:00:00 2001
From: Hanxing Yang
Date: Thu, 4 Jul 2024 20:07:08 +0800
Subject: [PATCH 23/57] animation details (#634)
---
.../common/placeholder/EditorPlaceholder.vue | 37 +----
.../editor/sprite/AnimationEditor.vue | 52 +++---
.../editor/sprite/AnimationItem.vue | 10 +-
.../editor/sprite/AnimationRemoveModal.vue | 13 +-
.../components/editor/sprite/SpriteEditor.vue | 8 +-
.../sprite/animation/DurationEditor.vue | 11 +-
.../sprite/animation/sound/SoundEditor.vue | 11 +-
.../animation/state/BoundStateEditor.vue | 11 +-
.../src/components/editor/sprite/gallery.svg | 3 +
spx-gui/src/components/ui/empty/UIEmpty.vue | 148 +++++++++++-------
.../placeholder.svg => ui/empty/empty-xl.svg} | 2 +-
spx-gui/src/models/animation.test.ts | 82 ++++++++++
spx-gui/src/models/animation.ts | 58 ++++---
spx-gui/src/models/sprite.ts | 22 ++-
14 files changed, 308 insertions(+), 160 deletions(-)
create mode 100644 spx-gui/src/components/editor/sprite/gallery.svg
rename spx-gui/src/components/{editor/common/placeholder/placeholder.svg => ui/empty/empty-xl.svg} (99%)
create mode 100644 spx-gui/src/models/animation.test.ts
diff --git a/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue b/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue
index 58eae5384..59cc484c3 100644
--- a/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue
+++ b/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue
@@ -1,13 +1,11 @@
-
-```
-
diff --git a/docs/contribution/contribution.md b/docs/contribution/contribution.md
deleted file mode 100644
index db2b66e9c..000000000
--- a/docs/contribution/contribution.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Contribution Guide
-
-## Contribution Process
-
-1. **Find or Create an Issue**: Before starting your work, please find or create an issue related to your contribution in the issues section. This helps the community track work and prevents multiple people from working on the same issue simultaneously.
-2. **Fork and Create Your Branch**: Fork the repository and create a new branch on your fork to implement your changes.
-3. **Implement Your Changes**: Make your changes on your branch. Ensure you follow the project's coding style and quality standards.
-4. **Submit a Pull Request (PR)**: After completing your changes, submit a PR to the main repository. Please provide a detailed description of your changes in the PR and reference the related issue.
-5. **Code Review**: Maintainers or community members may review your PR and suggest changes. Please work with reviewers to address any issues until your PR is accepted.
-
-## Project Structure
-
-- **`/spx-gui`**: Contains all front-end code files.
-- **`/spx-backend`**: Contains all back-end code files.
-- **`/docs`**: Project documentation, including design documents and user manuals.
-- **`/scripts`**: Scripts for building, deploying, or other automation tasks.
-- **`README.md`**: Project overview and usage guide.
-
-Please maintain clarity and consistency in the project structure when contributing.
-
-## Issue Tags and Labels
-
-We use GitHub's labeling system to categorize and manage issues and PRs. Here are some common labels and their meanings:
-
-- **`fix`**: Bug fixes.
-- **`feat`**: New features or enhancements.
-- **`docs`**: Documentation updates.
-- **`chore`**: Other changes that don't modify src or test files.
-- **`ci`**: Continuous Integration related changes.
-- **`test`**: Adds or updates tests.
-
-When creating an issue or submitting a PR, please use appropriate labels to help maintainers manage the project more effectively.
-
diff --git a/docs/develop/index.md b/docs/develop/index.md
new file mode 100644
index 000000000..a6de9e6da
--- /dev/null
+++ b/docs/develop/index.md
@@ -0,0 +1,13 @@
+# Develop Go+ Builder
+
+### Project Structure
+
+- **`/docs`**: Documentations for Go+ Builder.
+- **`/spx-gui`**: Front-end project.
+- **`/spx-backend`**: Back-end project.
+- **`/tools`**: Other independent tools that Go+ Builder depends on.
+- **`/scripts`**: Scripts for building, deploying, or other automation tasks.
+
+### Architecture design
+
+TODO.
diff --git a/docs/file-manager.md b/docs/file-manager.md
deleted file mode 100644
index e7375b2f6..000000000
--- a/docs/file-manager.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# FileManager
-
-## Competitive Analysis
-
-| | File System API | JavaScript Tree |
-| :-------------------- | :----------------------------------------------------------- | ------------------------------------------------------------ |
-| **Local Disk Access** | Provides a standard API for interacting with the local file system, supporting reading and writing local files and directories, as well as accessing the disk, but requires user authorization. | Requires uploading directories through file compression, unable to read and write to the disk in real-time, and necessitates abstracting the directory structure. |
-| **Performance** | High | Depends on the implementation |
-| **Compatibility** | Good | Depends on the browser environment, may vary significantly across different browsers |
-| **Security** | File system operations are subject to browser permission controls and provide built-in security measures. | Has good security in the browser environment; manual implementation of security may require additional work. |
-| **Flexibility** | Can flexibly operate on files in the browser environment, avoiding direct handling of underlying operating system differences. | Has high customization capabilities, but may vary in different environments. |
-| **docs** | [File System API - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) | - |
-
-## Final Selection: Using JavaScript Tree with State Management Tools
-
-Considering specific use cases, we do not advise using the local file read/write disk method. Therefore, we choose to manage files using an abstract JavaScript tree. To better manage this file structure and allow everyone to access corresponding functions, we use state management tools corresponding to mainstream frameworks, such as Vue’s `pinia` or React’s `Redux`.
-
-Below is a type restriction for file management. In this structure, `name` will serve as the file name, `code` will generate a corresponding code file with the `.spx` extension, `file` will save related files (such as audio or images), and `config` represents the configuration file for that item, generating the corresponding `index.json` file.
-
-```typescript
-// types/FileType.ts
-
-export type SpriteType = {
- name: string
- code?: string
- file?: FileType[]
- config: {
- [key: string]: any
- }
-}
-
-export type SoundType = {
- name: string
- file?: FileType[]
- config: {
- path: string
- rate?: number
- [key: string]: any
- }
-}
-
-export type BackdropType = {
- file?: FileType[]
- [key: string]: any
-}
-
-
-export type ProjectType = {
- title: string
- sprites: SpriteType[]
- sounds?: SoundType[]
- backdrop: BackdropType
-}
-
-export type FileType = {
- name: string
- value: Blob | string
- type: string
-}
-```
-
-Finally, we unify them in the repository to form a JavaScript tree for the spx project.
-
-```ts
-// stores/FileManager.ts
-
-export const useFileManagerStore = defineStore('FileManager', () => {
- const spriteStore = useSpriteStore()
- const { sprites } = storeToRefs(spriteStore)
-
- const soundStore = useSoundStore()
- const { sounds } = storeToRefs(soundStore)
-
- const backdropStore = useBackdropStore()
- const { backdrop } = storeToRefs(backdropStore)
-
- const title = ref('')
-
- const project = computed(() => ({
- title: title.value,
- sprites: sprites.value,
- sounds: sounds.value,
- backdrop: backdrop.value
- }))
-
- return {
- project: readonly(project)
- }
-})
-```
-
diff --git a/docs/installation/installation.md b/docs/installation/installation.md
deleted file mode 100644
index c104bb49c..000000000
--- a/docs/installation/installation.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Installation
-
-## STEM EDUCATION
-
-STEM EDU is an online educational platform for children's programming, designed to offer an interactive learning experience.
-
-## How to Run
-
-### Docker
-
-````bash
-# Build the all-in-one image
-docker build -t spx .
-# Assuming you have a .env file in pwd,
-# which contains the environment variables for backend
-docker run -v $(pwd)/.env:/app/.env spx
-````
-
-### Step by Step
-
-#### Frontend
-
-Before you begin, ensure that you have both **Go** and **Node.js** environments set up on your local machine.
-
-##### Frontend Setup
-
-Clone the repository and install.
-
-```bash
-git clone https://github.com/goplus/builder.git
-cd spx-gui
-npm install
-```
-
-##### Offline SPX Config
-
-In this stage, we build the two WASM components required by the web app and copy them into the app's assets folder.
-
-```bash
-## in spx-gui folder
-./build-wasm.sh
-```
-
-##### Build/Running the project
-
-```bash
-## in spx-gui folder
-# Build the project
-npm run build
-
-# Or, run the project in development mode
-npm run dev
-```
-
-#### Backend
-
-```bash
-cd spx-backend
-# Assuming you have Go & Go+ installed
-gop build -o spx-backend ./cmd/spx-backend
-
-# Run the server, assuming you have a .env file in pwd
-./spx-backend
-```
-
-### 4. Quick Play
-
-To start using Go+ Builder, you need to create a new project. You can do this by clicking on the `New Project` button, which is located at the bottom of the home page, and inside the drop-down menu that looks like a folder in the top navigation bar.
-
-After creating a new project, you will find that the project already contains some preset content. You can explore this content to understand the structure and functionality of the project.
-
-Remember, the preset content in the new project is just a starting point. Feel free to modify it and add your own content to make the project your own.
-
-## API Documentation
-
-[api doc](../api-doc/api-document.md).
diff --git a/docs/io-design.md b/docs/io-design.md
deleted file mode 100644
index 377262dbb..000000000
--- a/docs/io-design.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# I/O Subsystem Design
-
-# Project Import
-
-## Scratch Analysis
-
-### Page Features
-
-
-
-## Github
-
-### [Go-github](https://github.com/google/go-github)
-
-- Applicable Scenarios: If your main goal is to interact with GitHub through GitHub's REST API without needing to perform low-level Git operations, then go-github is an excellent choice. It is suitable for common GitHub operations such as retrieving information from GitHub, downloading files, managing issues, and pull requests.
-- User Authorization: Guide users through GitHub authentication to obtain an authorization token.
-- Retrieve Repository List: Use the GitHub API and authorization token to retrieve the user's repository list and display it in the front-end interface for user selection.
-- Retrieve File Content: Get the content of files from the repository selected by the user using the GitHub API.
-- Save to Project: Save the retrieved file content to the project.
-
-### [Go-git](https://github.com/src-d/go-git)
-
-- Applicable Scenarios: For more low-level operations on Git repositories, or if you want more advanced control over handling Git objects and version control, then go-git is a great choice. It is suitable for situations that require more Git operations, not just exporting projects from GitHub.
-
-# File Import and Front-End Storage
-
-| Feature/Library | [Dexie.js(10.3k)](https://github.com/dexie/Dexie.js) | [localForage(23.7k)](https://github.com/localForage/localForage) | [PouchDB(16.1k)](https://github.com/pouchdb/pouchdb) |
-|-----------------------|--------------------------------------------------------------------|-----------------------------------------------------------------------------|------------------------------------------------------------------|
-| **Main Features** | Powerful, Promise-based IndexedDB wrapper | Simplified, localStorage-like interface | Database that can run in browsers and servers |
-| **API Style** | Promise-based | localStorage-like API, based on callbacks or Promises | Promise-based, similar to CouchDB style |
-| **Ease of Use** | High (clear and concise API) | High (simple API, easy to use) | Medium to High (feature-rich but requires more learning) |
-| **Data Structure** | Custom, flexible | Key-value storage | Document storage, suitable for complex data structures |
-| **Sync Functionality**| None (local storage only) | None (local storage only) | Supports syncing with other PouchDB or CouchDB instances |
-| **Applicable Scenarios** | Applications requiring complex queries and high performance | Simple applications needing local key-value storage | Applications requiring offline data sync and replication |
-| **Browser Support** | Widely supported | Widely supported | Widely supported |
-| **Data Capacity** | Limited by the browser | Limited by the browser | Limited by the browser |
-| **Performance** | High | Medium | High, especially in terms of data syncing |
-| **Community Support and Documentation** | Good | Good | Good |
-| **Special Advantages**| Powerful query capabilities and flexible data structure | Simple to use, no need to understand complex IndexedDB | Strong sync functionality and complex data structure handling |
-
-# Front-End Zip Package Upload, Decompression, and Storage to IndexedDB
-
-| Feature/Library | JSZip | zip.js |
-|-----------------------|-----------------------------------------------------------|---------------------------------------------------------|
-| **Introduction** | Library for creating, reading, and editing ZIP files | Library for handling ZIP files on the client-side |
-| **Ease of Use** | Easy to use, with clear documentation and wide community support | API is more complex, steep learning curve |
-| **Performance** | Efficient for small to medium-sized files | Supports multithreading, more efficient for large files |
-| **Functionality** | Supports compression, decompression, editing, and other operations | Mainly focused on compression and decompression |
-| **File Size Handling Capability** | Larger files may cause performance issues | More suitable for handling large files |
-| **Compatibility** | Works well in all modern browsers | Works well in most modern browsers |
-| **Asynchronous Processing** | Supports Promises, enabling asynchronous operations | Supports Web Workers, optimizing asynchronous processing |
-| **Community Support and Documentation** | Extensive community support and comprehensive documentation | Documentation is relatively less complete |
-| **Usage Scenarios** | Suitable for most standard front-end ZIP file processing needs | Suitable for high-performance needs of large ZIP file processing |
-
-## Recommended Solution
-
-- File Upload: Combine HTML5 File API and Drag-and-Drop API to implement flexible upload functionality.
-- Zip Package Processing: Opt for **JSZip**, considering its ease of use and sufficient functionality for most needs.
-- Storing Decompressed Files: Use IndexedDB, considering its support in modern browsers and large storage capacity.
diff --git a/docs/library-design.md b/docs/library-design.md
deleted file mode 100644
index 12b82e32b..000000000
--- a/docs/library-design.md
+++ /dev/null
@@ -1,277 +0,0 @@
-# Sprite Library
-
-# Competitive Analysis
-
-| | Scratch | Code Monkey |
-| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| Sprite Library | Support for importing materials from the librarySupport for searching materialsSupport for local uploading of materials
🌟🌟Support for hovering over the clip to show multi-frame animation
🌟🌟Support for clicking on the SURPRISE button to randomize the clip. | Supports importing materials from the librarySupport for searching materials
🌟🌟Support for your own material library | - -## STEM Functional Design - -| Module | Function | Description | -| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| Sprite Library(User) | ✅ Add a Sprite file to your stage | You can select a Sprite file from the Sprite library, or you can import it locally, you can import jpg, png, gif | -| | ✅Delete the Sprite file | ✅Delete directly
⭕️ expires 30 days after being placed in the recycle bin | -| | ✅Find a Sprite file | Support name search, fuzzy search, later can support multi-language | -| | ✅ Online preview of the Multi-Modeling Sprite file | The hover state plays a multistyled Sprite animation (gif) | -| Sprite Library(Market) | ⭕️ Publishing Sprite Files | User can publish their Sprite files to market | -| | ⭕️ download Sprite file | User can download Sprite from market to their own local area | -| | ✅Sprite Ranking | Sort by heat, posting time, etc | -| Innovative | ⭕️ Support user sprite cloud material library
⭕️ Sprite Favorites
✅Support for clicking on the SURPRISE button to randomly generate material
✅Support for hiding sprite layers | Users upload their own Sprites to add to their own cloud library for easy recall, and users uploading gifs are automatically split into multi-graphic materials
Users create their own Sprite favorites- Randomly import a clip from the clip market to the stage- User can choose whether a layer is visible or not | - -# Difficulty analysis - -## How to realize sprite preview online - -Application: Frame Animation with Multi-Shape Sprite Material - -### Scratch practices - -Switch image URL : a material corresponds to multiple shapes, each shape is saved with a svg, switch md5ext(.svg) to switch the image to realize the animation. - -#### Scratch Sprite Json Example - -```json -[ - { - "name": "Abby", - "tags": [ - "people", - "person", - "drawing" - ], - "isStage": false, - "variables": {}, - "costumes": [ - { - "assetId": "809d9b47347a6af2860e7a3a35bce057", - "name": "abby-a", - "bitmapResolution": 1, - "md5ext": "809d9b47347a6af2860e7a3a35bce057.svg", - "dataFormat": "svg", - "rotationCenterX": 31, - "rotationCenterY": 100 - }， - ... - ], - "sounds": [ - { - "assetId": "83a9787d4cb6f3b7632b4ddfebf74367", - "name": "pop", - "dataFormat": "wav", - "format": "", - "rate": 44100, - "sampleCount": 1032, - "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav" - } - ], - "blocks": {} - }, - ... - ] -``` - -### Other possible approaches - -#### option 1: generate gif animations - -Automatically generate animations on multiple images in the cloud and save the animations to show the animations directly instead of cutting them one by one. - -| Library/Tool | Processing Area | Processing Method | Brief Description | -| ------------ | --------------- | ------------------ | ------------------------------------------------------------ | -| GIF.js | Client-Side | JavaScript Library | Generates GIF animations directly in the browser using JavaScript. Suitable for small or client-heavy projects. | -| ImageMagick | Server-Side | Command-Line Tool | Creating complex GIFs or other image formats on the server. | -| Qiniu Dora | Server-Side | API | Currently only available for images stored in Qiniu Limitations of the original image: Supported formats are JPEG and PNG The maximum number of frames supported is 20 The maximum supported image size is 1080*1080 | - -##### GIF.js example - -```js -import GIF from 'gif.js'; - -function createGif() { - let gif = new GIF({ - workers: 2, - quality: 10 - }); - - // Let's say images are an array of images that you want to convert into GIFs - images.forEach(image => { - gif.addFrame(image, {delay: 200}); // 200ms delay per frame - }); - - gif.on('finished', function(blob) { - window.open(URL.createObjectURL(blob)); - }); - - gif.render(); -} - -``` - -##### Qiniu Dora Animate API - -https://developer.qiniu.com/dora/5448/animate - -API - -``` -animate/duration/
- /merge/key/
- /key/
- ...
- /effect/
-```
-
-Params
-
-| Name | Required | Description |
-| ----------------- | -------- | ------------------------------------------------------------ |
-| | Y | The interval between each frame of a GIF (unit: 0.01s) must be an integer greater than 0. |
-| | N | The source image key (Base64 encoded) of the synthetic GIF ensures that all the source images come from the same bucket. |
-| | N | Define the playback order, with values of 0 and 1. (0: Loop playback in positive order; 1: Reverse loop playback; The default is 0. |
-
-#### option 2: generate real-time canvas animations
-
-| Library/Tool | Processing Area | Processing Method | Brief Description |
-| ------------ | --------------- | ------------------ | ------------------------------------------------------------ |
-| konva.js | Clisent-Side | JavaScript Library | Uses the Canvas API to dynamically draw image frames to create animation effects, entirely running in the browser, suitable for real-time rendering animations. |
-
-##### generate canvas by konva.js
-
-Need Sprite Chart to render.
-
-### Step-by-step Comparison
-
-| Step | Scratch | Gif(gif.js/dora) | Canvas(konva.js) |
-| ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| 1 | Contains the official default library's material array in the project json file. | Generate gif animations in the cloud and display them directly. | Create a canvas |
-| 2 | Retrieve json data from the sprite-library component; pass it to the LibraryComponent. | Randomize import positions using a random function in Scratch. | Create real-time canvas animations for sprite graphics with multi-frame compositions |
-| 3 | LibraryComponent processes data; categorizes sprite materials by tags. | - | |
-| 4 | Pass processed sprite materials to LibraryItem for rendering, includes multi/single frame modeling objects. | - | |
-| 5 | Handle mouse hover over sprites in library-item for multi-frame materials; rotate icons and update URL in LibraryItemComponent. | - | |
-| 6 | Render image in LibraryItemComponent. | - | |
-
-## How to construct official sprite library
-
-### Homemade sprite material
-
-There are three sources of homemade official sprite stock footage: GIFs, videos, and existing sprites.
-
-#### GiFs
-
-| Implementation method | Tools/techniques | Advantages | Treatment area | Scene |
-| --------------------- | ---------------- | ------------------------------------------------------------ | -------------- | ----------------------------------------------------- |
-| Diffraction (physics) | FFmpeg | Highly efficient with multimedia data handling
Supports multiple video and image formats, including GIF
Highly customizable with command line arguments | Server-side | More power in video and audio processing | -| Diffraction (physics) | ImageMagick | Powerful in image editing and conversion
Supports a wide range of image formats | Server-side | Excellent performance in image editing and conversion | - -Use FFmpeg - -```js -const { exec } = require('child_process'); - -const generateFramesFromGIF = (inputGifPath, outputFramePrefix) => { - const command = `ffmpeg -i ${inputGifPath} ${outputFramePrefix}_%04d.png`; - exec(command, (error, stdout, stderr) => { - if (error) { - console.error(`Error: ${error.message}`); - return; - } - console.log('Frames generated successfully'); - }); -}; - -generateFramesFromGIF('input.gif', 'output_frame'); - -``` - -#### Videos - -Use FFmpeg - -```js -const { exec } = require('child_process'); - -const extractFramesFromVideo = (inputVideoPath, outputFramePrefix) => { - const command = `ffmpeg -i ${inputVideoPath} -vf fps=1 ${outputFramePrefix}_%04d.png`; - exec(command, (error, stdout, stderr) => { - if (error) { - console.error(`Error: ${error.message}`); - return; - } - console.log('Frames extracted successfully'); - }); -}; - -extractFramesFromVideo('input.mp4', 'output_frame'); - -``` - - - -#### Sprite Charts - -Use PIL (Python) - -```python -from PIL import Image - -def extract_sprites(sprite_sheet_path, sprite_size, output_prefix): - sprite_sheet = Image.open(sprite_sheet_path) - width, height = sprite_sheet.size - - for i in range(0, width, sprite_size[0]): - for j in range(0, height, sprite_size[1]): - box = (i, j, i + sprite_size[0], j + sprite_size[1]) - sprite = sprite_sheet.crop(box) - sprite.save(f"{output_prefix}_{i}_{j}.png") - -extract_sprites("sprite_sheet.png", (64, 64), "sprite") - -``` - - - -### Ready-made sprite material library - -Free: https://www.aigei.com/game2d/character/dynamic_1 - -Paid: https://craftpix.net/categorys/sprites/ - - - -## How to save the library - -### Qiniu Kodo - -> Kodo is a self-developed unstructured data storage management platform that supports both central and edge storage - -https://developer.qiniu.com/kodo/1234/upload-types - -#### Methods - -| Method | Description | Advantage | Disadvantage | -| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| Form upload | Complete the upload of a file in a single HTTP POST request | Ideal for simple application scenarios and small file sizes | If the file size is large (larger than 1GB) or the network environment is poor, the HTTP connection may time out and the upload may fail. | -| Chunked Upload | A Chunked Upload divides a file into multiple small chunks, each of which is uploaded separately in a separate HTTP request. | It is suitable for large file transfers, and uses sharding to avoid connection timeouts caused by the large amount of single HTTP data.Resumable upload is supported. | require multiple HTTP requests to complete the upload process, which will incur additional costsIncreased code complexity | - -#### Form Upload Example - -```html - -``` - - -## Recommended Solutions - -- **How to realize sprite preview online:** Generate gif animations by Qiniu Dora animate API. -- **Official sprite material library construction:** Generate our official stock footage library from Gif and Video by FFmpeg, and from Sprite Chart by PIL(Python). The same library is used to reduce the development cost. Because it is an official material library production without offline problem, and we use server-side processing to reduce the overhead of the client. -- **How to save the library:** Use form-upload method to store library in Qiniu's kodo. \ No newline at end of file diff --git a/docs/load-save.md b/docs/load-save.md deleted file mode 100644 index 55e3d6519..000000000 --- a/docs/load-save.md +++ /dev/null @@ -1,96 +0,0 @@ -### Background - -#### Project Background - -In current software development practices, project management and file version control are core components. Projects involve a variety of file types, including code, images, audio, etc., requiring effective management of these files to support the development and maintenance of the project. - -#### Requirement Background - -Users need a convenient and efficient way to create, edit, save, and manage project files. Especially during file editing, the ability to perform incremental updates rather than just full updates is needed to improve efficiency and save resources. Additionally, the uniqueness and non-redundancy of project files need to be ensured. - -### Solution Overview - -**Project files are no longer stored in object storage on a project-by-project basis, but rather on a file-by-file basis**. - -#### Roles and Their Responsibilities - -- **Frontend Role**: Responsible for the design and implementation of the user interface, including the creation, editing, and display of project files. The frontend also needs to handle communication with the backend and interact directly with the object storage service to upload and delete files. -- **Backend Role**: Responsible for handling requests from the frontend, including providing complete project information and updating project information. Project information mainly includes the project's file structure, version number, `id`, `uid`, update time, etc. The backend does not directly deal with object storage. -- **Object Storage Service**: Provides storage capabilities for project files. Each file is accessed through a unique URL generated by a hash algorithm, ensuring the file's uniqueness and non-redundancy. - -#### How It Works - -1. **Project Loading**: The frontend makes an HTTP request to the backend, which retrieves the complete project information from the database and returns it to the frontend. The frontend parses and displays the project content. - - An example of the file structure is as follows (using MySQL database, which cannot store arrays, so JSON is serialized into a string for easy storage in the database): - - ```json - { - "index.json": "https://xxx.com/d2a6802666d0d9248393d0b02abc93ae.json", - "assets/demo.png":"https://xxx.com/f535a73a3dfe15ca7c623512f09d5ed4.png" - } - ``` - - The key corresponds to the file's relative path in the project, and the value corresponds to the file's online address (using object storage). The backend needs to deserialize the project file structure for the frontend, thus loading the entire project. - - After loading the entire project, the browser might have a data structure like this: - - ```json - const projectFiles = { - "index.json": { - onlineUrl: "https://xxx.com/123.json", - content: '...' - }, - // ... - } - - ``` - - The key corresponds to the file's relative path, and the value includes the online address, file content, etc. - - - -2. **Project Editing and Saving**: After the user edits a project file, the frontend interacts directly with the object storage service for file upload and deletion. After editing, the frontend sends the updated project file structure to the backend, which updates the database. - - ### Core Logic Detail Explanation - - #### Loading Project Files - - - **Frontend Request**: Carries the project ID to initiate a project loading request to the backend. - - **Backend Processing**: Queries the project file structure in the database based on the project ID, and returns the serialized JSON string to the frontend. - - **Frontend Parsing**: Converts the JSON string into a data structure of project files for editing and browsing by the user. - - #### Saving Edited Projects - - - **File Processing**: After editing a file, the frontend removes the file's `onlineUrl` and interacts with the object storage service to delete the old file, upload the new file, and obtain a new `url`. - - **Project File Structure Update**: The frontend collects all new `urls` of the files, forming an updated project file structure. - - **Backend Database Update**: The frontend sends the updated project file structure to the backend, which serializes it and updates the database, with the version number changing accordingly. - - ### Points to Note - - - Using a hash algorithm (e.g., MD5) to generate the file name for a file maintains the original file extension. This ensures the file's online address uniquely identifies the file, avoiding duplicate files and saving resources, as duplicate files will have the same `url`. If a file is changed, its `url` will change, providing a basis for a variant of incremental update between the client and server. - - - Users may need to download the entire project. This can be quickly accomplished directly with the object storage's packaging feature, meaning the frontend can directly interact with object storage without going through the backend. - - - Upon clicking the edit button in the UI, the frontend deletes the online address of the file, which is the `onlineUrl`. This is because once a file is edited, it is considered changed, and without a new online address, the file's old online address is removed. This approach allows for a kind of incremental update based on the presence or absence of each project file's online address in the browser. - - A possible logic for frontend project update: - - ```javascript - function saveProject() { - var fileTree = {} - for (const path of projectFiles) { - var url = projectFiles[path].onlineUrl - if (url == null) { - url = uploadFile(path, projectFiles[path].content) - } - fileTree[path] = url - } - postToServer(fileTree) - } - ``` - - - For a new project, since every file edited by the user does not have an online address, files without `urls` can be uploaded in the manner described above, and the new file structure can be sent to the backend. - - The initial version of the project is set to 1. When the user saves the project, the backend increases the version number as it updates the database. - - Throughout the process of loading and saving project files, the interaction between the frontend and backend only involves loading project file structures from the backend and updating the database by the backend, without the backend dealing with object storage. The frontend interacts directly with object storage. - diff --git a/docs/project-runner.md b/docs/project-runner.md deleted file mode 100644 index 464422642..000000000 --- a/docs/project-runner.md +++ /dev/null @@ -1,106 +0,0 @@ -# Project runner - -# Module Overview - -This module is part of the compiler implementation for an online editor. This document investigates the existing ecosystem tools of Spx and organizes the technical challenges and feasible solutions for implementing online compilation. - -# GitHub Repository -- https://github.com/goplus/spx -- https://github.com/goplus/gop -- https://github.com/goplus/ispx -- https://github.com/goplus/igop - -# Client-Side vs. Server-Side Compilation Comparison - -## Client-Side Compilation - -**Advantages:** - -1. Immediate Compilation and Execution: Users can compile and run code immediately in the same environment, enhancing user experience. -2. Reduced Server Load: Compilation occurs on the user's device, not occupying server resources. -3. Offline Capability: The application can operate offline without needing to interact with the server. -4. Real-time Feedback: Users can see the results of code changes instantly, aiding in learning and debugging. - -**Disadvantages:** - -1. Performance Limitations: Client-side devices might not perform as well as servers, especially for complex compilation tasks. -2. Security Concerns: Exposing the compiler to the client may pose security risks. -3. Compatibility and Consistency: Different devices and browsers among users may lead to variations in compilation behavior. -4. Increased Frontend Complexity: Implementing file assembly, reading, and compilation functions on the frontend is required. - -## Server-Side Compilation - -**Advantages:** - -1. Unified Compilation Environment: The server provides a consistent compilation environment, ensuring uniformity in compilation results. -2. Powerful Processing Capability: Servers typically have more computing power than clients, suitable for complex compilation tasks. -3. Enhanced Security: Compilation on the server reduces security risks on the client side. -4. Convenient File Management: Servers are better suited for file storage and management. - -**Disadvantages:** - -1. Response Time: Uploading files from the client to the server and sending back compilation results may cause delays. -2. Server Load: All compilation tasks occurring on the server can increase its load. -3. Network Dependency: Continuous network connection is required for file transfer and receiving compilation results. -4. Lack of Immediate Feedback: Users may not see the effects of their changes right away, affecting the experience. - -## Summary - -### **Supported** - -> Client-side compilation has unique advantages - -| Feature | network dependency | response speed | real time feedback | -| ----------------------- | ------------------ | -------------- | ------------------ | -| Client compilation | no | fast | yes | -| Server side compilation | yes | slow | no | - -# Front-End Storage Solutions Research - -## Existing Web Storage Technologies -| Technology | Capacity Limit | Data Persistence | Access Speed | Sync/Async | Security | Use Cases | -|------------------------|-------------------------------------------------|---------------------------------------------------|---------------------------------------------------|--------------|------------------------------------------------|---------------------------------------------| -| LocalStorage | 5MB per domain | Persistent until browser cache is cleared | Usually fast | Synchronous | Not suitable for sensitive data | Storing small amounts of non-sensitive data | -| SessionStorage | 5MB per domain | Persistent only during browser session | Usually fast | Synchronous | Not suitable for sensitive data | Storing small amounts of non-sensitive data | -| Cookies | 4KB per domain | Expirable, but can be cleared by user | Fast, but sent with every HTTP request | Synchronous | Can be set to HTTPS only to enhance security | Storing small pieces of data like user authentication | -| IndexedDB | Several hundred MB or more, depending on user's browser and disk space | Persistent storage | Fast, but can be slower due to asynchronicity | Asynchronous | Not suitable for sensitive data | Storing large amounts or structured text data | -| Cache API | Depends on user's disk space | Persistent, but can be cleared by user | Depends on data size and disk speed | Asynchronous | Not suitable for sensitive data | Caching requests and supporting offline content | -| File System Access API | Depends on user's disk space | Persistent, but can be cleared by user | Depends on data size and disk speed | Asynchronous | Provides more direct file access, but requires user permission | Applications that interact with user's local files | - -## Compare three technologies based on different perspectives -| Perspectives | IndexedDB | File System Access API | Cache API | -|-----------------------------|------------------------------------------------------------|----------------------------------------------------------------|-----------------------------------------------------| -| Basic Compatibility | Supported by all mainstream browsers, but implementation details may vary | Mainly supported by Chrome, lower or no support in Firefox, Safari, and Edge | Part of Service Workers, well supported in mainstream browsers | -| Performance and Limitations | Performance and database size limits vary by browser | Usage may be limited, especially for security and privacy reasons | Storage policies and limitations may slightly differ | -| Mobile Device Compatibility | Well supported on mobile versions of Chrome and Firefox, potential issues with Safari | Mainly supported on Chrome, other browsers offer lower or no support | Generally well-supported on mobile browsers | -| Data Synchronization | Requires custom sync logic with the server; suitable for complex data structures | Sync is more complex, often manual; interacts directly with local files | Mainly used for resource caching, not designed specifically for data sync | -| Offline Support | Excellent for offline data storage; supports large and structured data | Direct read and write to local files; very suitable for offline operations | Key component for offline access in PWAs; caches network requests and responses | -| Storage Space Management | Large storage capacity, decided by the browser; monitoring needed to avoid exceeding limits | Depends on the user's local file system; potentially very large, but management is complex | Managed by the browser's caching mechanisms; constrained by browser cache limits | -| User Prompt | Usually no user prompt required, operates silently in the background | Explicit user permission needed to access files; requires direct and ongoing user interaction | No user prompt needed for caching storage; operates silently in the background | -| User Interface | Operates in the background; does not directly affect the user interface | Requires direct user interaction, such as file selectors and other UI elements | Invisible to the user; operates silently in the background | -| Experience Design | Indirectly impacts user experience; very useful for complex data processing within apps | Significantly affects user experience; user permission prompts and file management are core aspects | Improves user experience by speeding up load times and providing offline content access | -## Summary - -### **Supported** - -The following web API was chosen to support a generic browser FileSystem. - -| Feature | Firefox | Chrome | Edge | Safari | IE | -| --------------------------------------------------------------------------- | ------- | ------ | ---- | ------ | -- | -| [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) | yes | yes | yes | yes | no | - -### **Rejected** - -The following APIs were all considered in choosing a backend to support - -| Rejected APIs | Reason | -| ---------------------------------------------------------------------------------------- | ---------------------- | -| [LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) | Limited storage | -| [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | Limited storage | -| [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) | Limited storage | -| [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) | Requires a request URL | -| [File System Access API](https://web.dev/file-system-access/) | Chromium only | - -# participants - -[a-linye](https://github.com/a-linye), [motongxue](https://github.com/motongxue). diff --git a/docs/screenshot.jpeg b/docs/screenshot.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..0c0fb51e95177d452fa0d5b51012385a03362f9a GIT binary patch literal 554868 zcmeFYbyQrz)+gEoO$Z*mkswL%;0_^JfB?a@Ap~upan~RLf;$NsXrOU#+%-Uu#%bK$ z-5>ex+;{KHTHm*3-pu^>_E~+-?^NxoT~%k7^xjnuQxA&(e0do;82}0j0D$s%0Unl7 zrsO0g4L_+W%gB9{{zt@bz$2l(1ppv6P7bQF?`gGlbZIdc|B>QvoRP7k-QVYbLXY{L zPyEdt02pQaPk8>T;HM_0j>eA+hmSu7hezR$g?;geUzq;`zxj*5`~!>p#jZ|vPLDjF z{$dApRmn$e@`&G<{~P}DZ`jz*;V*yqBaaBg+WD`nzx21n&rNMK)E=K$k3S&55ugf? z1-$=T|Ht=7vdsbj1kL~e)aZYOefbFh)O-T~$dLaEWB3IC-~|Ez)kFUZ`&XOT895mJ zM|NnB_a|m%0KhQ}0Km}!0EmVGfMQ0elZL07(GqlfU%$j`~Pw7-)Y93j+fk<0;m&XHT)7K7IBa@A)%qTWF(E$oQ|!mk|3!Le1rT6i=wiP^MWF*c
zAwWSTKzZl{Q2$jYbd*Q>XKeu(sA%YzSWi%%K6{M!#0NY|e)0qz9RnX78|V3BD!`LR
z1_BIB!k1V?oDxPai0M@9x%^@>vk*^7NXh8A->a&rYiL4q%16F9WG}5S@N1d)$0k&^
zjV|*^nmRfM1jfZzRCOFO^6&~s8=E<~B({%{zmk&qp#81$NKn>1=rw%R^-WUlqj0Ln
zQawTa?+W+$iiVDXiS_g`T9p9s1m&?XXiu>)Fwvj>t;6Fh0UF^;bWRBs3?d`H7sRUS
z_A!}=5fV~5F14(-LrmWHvE>!?JP!VGl}p@T90NufB&Cc^pzX^?9ejZgNWgQ{N09`m
z1ORcsKo;E%(p!H>(f;qlXDW&`8p=Rlk6}ExEEC;M!Ivni67qA`{Pz=`qQCccL%hKk
zXi~a8)^r?!LH;XK7@yjJb-fc>@{Ut(KDhGJ-ZAU4bsO-`gd?XfMX@5zI%jc?>+N)`
z34v1Y2nYaDQYZxYX#YQaYzH}>`COh)Kq{a#nt5Kzz@{DNT)uFy~HRjS=|Z
z%~5a10=7rGU@G56Hcniv(P`R00m8ets_4t&s;_
zNx$%e?k5YR9DZwhcDn7Y>0YGN-?b!;l$c2#_duA0gpQ{FyN(d=F(z(-qF!f3SKW;U
zWBU-6t!9->n+j>Lh*T}l?2c8u!w#{MU`PcBj}-(
z9h*?>x{z)ocBKpFtXes97Oqu_{8G51waGqbSU4}mmMp)b_nlcbPRf04Wkjs)B;T~6
z#}*C%FD=KBafzoy4IHrgvwQ0+%GZnb6t?bqv14vY8|cs9?@JI6V}APE>lzhU?PRuc
zJ+-@^*9{5)Xd#R)9t;3E0o1BIv+S|%($EE4AKKkmi3=apj`Mq@Zh%^^{c?5|yD7hM
z+LXyvuzxFiIwf|}*4VsTF}%iO_3%>b)UDY&tn%`jKZd|I{Xc|+Jo*3JwV$02acJpI
zr1w6r^(emt+x>&-#UyO3;6v8)X<)s0o4qOg+AF7
z#ezzDWX(Pwxy^nw3V<=k>eHpT?6V@Q>jxumG8G6Cg*DhzP#L4gE5p_Z9sr+zxrX8F
zC~G`pSt}^;cMu3*rekIB==OZSuG*zinj;9?G_UTqj>xP`v<8t&INF0fE=aIKN(H+p
zYU{7TbUpk$D>JjuXSz_0!!u$BZeV4n=r`-7wI(2_RQbc0f&Ux?1WDp)5v!KMi%&3%!qh6|s-w^qMR!v0Xq^^hGg~EPp{U=o!
z-AQGYkLzy(Df={vv&}nljkC
zro*LjbEg-j7k`~@EqOqeI|9KBAP?dJ33DKFe40|D^Nn!M&A`D!^ye5m@9UwIa%Psg`
zDapdrYaLVjWD<2Ai#Bg>V%)xb_7xnIx0+J~bA4X+`|Uc=9L*JoU-->ZgIZgTe`=ub
zMwt9tZoy>Eo34Euw%0u}<259CAw@jx|BG4~Hv3jl?M+ZRX+M2s5NFPy=$#)wxm@ow
z>BNWHZ4eU>YTNC*t7&h5tiq_y`Nhj^v9m(9LH)XZ;Vmj^SvrjtFPK$Tf_^EPUzWj!
z%@g=mSC$S-^qb>`Chx1`hV+J~{>1?uJ;ebLXXCuL%5Orl42a>~1_hy7u8D_HzOi-M
z4ZF3G0umQewKog*&O%l^vApHZLIs3LMnO{2&F-|1^Ys5>h5k=Yy#M9Yjbh&+!Ek}@
zj8oEVO`;}%r`JS-EL(*(CBBc}Zjj*LWK%KC8inKDIPIF3k$Uy*i;8}jcaWpMJA9JA
z%vAE~Of(@h|Ay~0W>qzBkMHt^DcLt7?na}7)?ZAez59mZN%1nYjnZyPgJv?>V8I^W
zgj;SPMs&VAwt&ySZZ1CdX7{B+jKuN+nzgKvxzU0EQ7`Yhg-e1nhn)J
z?ZfM`&KEaX9
zl-PD`zWV@Br3lqv%w2d5;g&se5dTsgr>rWR>hNL63qQB~t>=KwuD+B{;m0Vteg&8%
z<@wL42Y?0J)p+Ve{iTE9$7NB-Y0H;tUL&?YBl&)vs@I3UJ(nbTfh4H{__FrW-2c0S
z?tl3$L!R_bmyWx92Y|WWDd!M~G(pESIY}6ac@w3_SjIXO)w6dIm5@mxh3qFDI@}k3
z#I|5#?;CV05=(MJjZ_r4p)pN?zB9=`rs2-K<~X7qK~JM-4{BZi)M*^X29E^gT~Kmo
zzbMy)g}dlF>k6?WhdQJ{>#~~!XFkWr=-Nq=IFg#A;Oe<(Y`U7W}yuN*AAm^-5N8dUaXN&3l*-)i&C_)U1j)Q6OdK0
z96!Gx@tY^7_TkdFrC=W=6$J70Tq?C*CVCS)bZI0JIV5(rs?I5jD=r+dF%|RmiBMRQ
zY0J*pt=_&)Zje&16SN!*XKIh_M~mIX3Mu>ek0mol;8!jsfXdEbNiK95R&zM?b`^Ai
zb2YX#nxJI?)gumv1_bNqY8v(oo9^=qDd=N(
zS(RN^+G+QvX6r)m+93M7jHAy_wx@qLAU{wuf_8Byx=P__NeW{?7X=mY&%j0XkM7mt
zBo_@Gs7)@g2<4+r-mosP?TRT0Ac@=6k~`8Lw&gT#PXGI{#l8iPgMS1y#g2_
ze8zvxsVk`GY3mVjI;we@)1szR&k0FrCaGRS_nt7U_c~JwCt9RmYQ5;|yR)Sfy~@09
zFT7oz`rTMmoyeuMU(^Jl0p}n@zsWEYw2f43VAbq^EA{`4)BE2OL06s|BKt2g8Y@@3
zJ5HDlmpW#xGKyEsTX@8^HGET*{{{8PiMq*J;7JGKZdaUTw|z;Mb{7;IJ8shl19%g}
zh8slxf+XEiM?oBWrZ+?LVjr!=xpMA-qTO}Z^L(Bsl4swvt~&n(yUJrkjKXeod`>Q+
z;wbU{e(TTm?|xrezO*1`{Ik)CS=>Ae
zfIqt<({C7&wPdQglXRX)%eLm>jXiTdtc?5eb1uqa->Pn7Y}fnvbcV)8fq*x-^T0Dh
ztlKL9<_j$l=Eh@#Rj7T6tO&YcxA)wwg?ZXG#bl`vcm%9S{PXXU7Re378(AWRZ3=|*
z5~gwqBdDEI)VHU+y
z=xDb^wN0HHxpcUCq7SO9&bR)-Xf?2J7`A)=x?xjGq8!9tvgQ>}e+IJ=`{>^6ML2$_
ztg3yEyTzlJp`tGm-*EROt{_=cbtPgH--lhnMo7$^>W6_F
ziVOD=xY5F&;9)EhDIQ}I2S_P|N<;KBijeKjT@RH-Yt%UKax
zoQ+rgbS@)`ep$tHzjO9w#5je^GP9eEM`$?j#?;a83=8Z`O4O%ASbfg)0yxyoZM|=A
zd@YP}eyZD6=sp0bWJd02oE*WUcIhNp7>c&4=bTd3cqt0^ob
z$tI*<_bm>LH~o9Z2F69(#Q##iNg-}AN)#+Fa?|YXhhr$oRM{SYonj!OKi#0
z6yVou5tLHLl!a6W(Yt=L^!|?F&iCqt-HN<96U||K4&@+DWQv06BrIYY&cxKNz?)+V
z9iL}Wn%Q5ps#3kHoC!-`HJG!_{#i8^-zul2x|CiVEP&GDv=R_y)VD?Xs(mjl{b!8A
zmy^H&>i9ESBq*rg0KjVJx%zDtb+fL7A^dnh!vk7)}yLZeQwJitG
zk4JTE3UKh=j<;@_EQtnxYXuU|w0|)+h-X+$O;)^)N{0+2Xql~8jjFHacRPgZDNU$?
ztsqWkiB`EnWWE=VhNXEs2dxnFgqJ>{?Hmr4iyVW5V{!%ciXvB
ze-79KMd_8@$l?Hxd$QgHOcSM!PRRZKYJZ_HyyDXJ`~`Rb#wa?mf04nqdGO99>4Vi5
zyQ6sUV1T^5YtuYrLfJ)Yx4bL&pM|m#!uDv01i#Qm_ZN
zhf7X#k19vmteZP8rG;K0D~+JbsU9v*rqj*-lt1|vR8?VCu<3eV%#pFL{Q#ios;>X^
z0MNw_zK1K^^RNll2phtjgZ6g3SwuCuXKdjb8p&pQ+d>r+71`y*jBV2>u$kq`nd$O+
zmBngm&7MR|pkWI9T}B!-t@sc5J=^PaA=J~GbEr6vnGd!62sKGJqd
zPZanKt1s19M{uJO(aQ%-(z6>kESs6ZytCjLx-WSAWTpB;Bf-}Pv%Y7#hDQ=k-EEI$
z!{L4a6tvu0O>&=R-Zxy(+-WA=e$v=AoH+Asy8S(KNBaP{r$m1MyuPirbkd75;^U&~
zcb0wts0@gZ2+0X0R*>5Ds=aMvLkkE3xW^2oV+h8Ka9L}P$U*p8vOPV&ur3nv2z(SY
z7PWCZSxKL_f=A3;S`!=Oz+TnN_?-+!`GmW)e6UlXdMcC3c;;wuyjP*r55Hg`hm_q{
zCo9~wKdKtE+&<{~0RS3MegKsC9`d?MCyvT}uKc8(CvclQr$EdgV$)w=J4G>@e)5$R
z$2O2_%oaD>A1i~QLJNa49L(+*_UOWJiPa*4I;wS#C(n-hjCqru!rway2?u0y6q9#>
z2h?I|-_*mbJXp1jE4rL!e=ru77Fe0Qc>eQfrP$B;V@_w@`QTgIT@hT;Q@IhKCc&5H
zKs~Kb@yQuqe5JeidwcaFes<+$KTd;^27Cu;)6GP3s&L8keM-I~TVC&ypH3fa!(0v7T-8xlE;!t)3G3>T(8
z{Xpula+gV{SZIZI{>DUN?E&e}WQLTYn7fY*Cj{kRzuNaRw#GV6;gW=I5ksriLuN^k
zPF;;EDgzS4a)BQ%{OHpUKP)r&ZAO9u>fSb(5~vCz
z?B%LbZBAJBn-foWG7Av|&QZ_)%?xNW=QpL`vhhiCTU1#`M;Vfv_hRg5q^{WO7^U+z
ziD&7TU_kV`LR~mp&sh#cw&d&qz-qhyTB>yClkc2-)K!sQrq_Yxp1z5F!pmn747;(r
z;u=mInV!!|+B&pKgTgli@&)BU)n_YhHnPuc4SGO)C5@WH^&Weo>iZNPHD3*hS}@rG
zDDznW+(SWBEsjy4P)m_ubTGq+r!Ub0X)r3fNeri>%K>
zg`RB|rYL{fcGDv@1V*^>V?@cd4cI*0f1UAV&3U`pMTk
zZI1H+z?}C0c$;vZNQ5I+QY@80Pbr?|X=}MO!GazXztu2ZjI_AR4VC7Zor8^~sOd>c
z=N0UYth38bZjB$AS1K8u-8
zKXdk7Y^P(vdG{~t$`h-q21DmLMJ3iM2chK1v@~aDb4;SoQ33#$Cl}Q3%qKi4w5&J1
z%Mg_AijV5d@adyo2cvq1NnYIL2({ZG8TB(31Wdjow>o!5ZTzifBsV=#;5JNRT)_umF<%`)%jY`
zkla*bK?zuaOLg;T$OX5JjVHwS1f-v?A}9PY-dUoN&J1@pJXL_mUo^Pv8$Kvt1XF%=
zTeP95`0-O|=(H4mcI%duWuhFat$B?^AZxEYK?xCVvqJIr6^NUmp*!v={LTAOCyNI_
zW%2-ZS6#_^ljbu~mz0uXH_UjSuNMtIycOpU02_{m7?6fd+4v_3HU>J^50~uKngMe|-nv0!#5f#cNURO9cWG$sbRgJ-Dk~swsHw1l*Nynl$%#
z?q7ZXpVJPf&53Vr%<*%h%Wi*MFo`Pd3EP(!msEvE=Sxa&$)u!>^8T&AyJE^
z?@m6md}CZt;;o**%^MJ@_3S$tb`-cn8*#u^R+T$4yS>{)(zU)oYpQ{sd!U9IGW0w=
zF>^p13tMGx@aMwbM5X$+0`89Hs05Dj7Ik04oQcg2D%r85u~jnVcMQSEj$W_r>Y>9%
z8M-FH{AyYYz>v=2*-QqtfC|0L~g54
zsi-JSeRf|%12;Wa&cs(snMNy-cfTY3pu)j1816YL%Hb3-e?(k=1>4>|J^4*u|eoIL!iO}Ff`WFD}H43gDy7Iv4GyV%u`197?%{UWNYiqdW(rO(bVF4
ztxB}SZ~DF^eby#(X+1Zl*K6X7Q6cv~SIG9Rl~}yVYGzK?Tl^&mNOQzw{;k>nuR*!$
z8ELBa370!M_L!N*+7@0sa~dow;4!L$!1twAa_p=OM3PBSg{-9Sq()J3JVwZRo!UG7
zmH7!0^Z8!=U9<6yMYH^|X0uY0(##zfy!Yp&AIgrqj9zH)9Iwa6YwV`g9q9|CriVG%
zX2^C!BARg&U^dRY=ieFeKO&&MCEVuj2
z^_h%HOR4k(D4)mJ2lZq)EJb6de%KS(|CESq>khZ7^ClOz@kDrwBkt!5qY5jH<(#WV
z;;!Xbi>G-G%v!!Z+S&z+tsyznEbDs`P6gF-d7Ce*gUW>L^i305qi6Yl*s|M*m49_#
zu?N+^*<=|^Pp+}$bvBhYv1a>rtRbnQ%o?$06%GM1oSRUCYMF@;HSY{~)vpVfA?9AA
z%9)`Q?s~Ryg-)>|eV95Kjf<`?1Gaz!3&na?Bc*})T6iKQd`%NO%^;W-%CNrK;Ec94
z^?1iwSyA?KCQp1tSIub^yvmECeLcP;E3bM|U9TXSQk1nc=p7IX4@`RkjCz~L)>Dx}
zBw1HF25Fivcr%bLGb#lR0CjQK9&gy=LV)zqZGwAb8x;@`@p-ORFU%4?=WOr`_Ps(w
zQc+83vTJ(F8OZLb>mZ5{g=X+Nd)EYZD30XK#KLzos9yyQ+)?i}mA)ryKZyVBcH5^F%zmTNlD)z!0H?2Q5l{WnC`vf)jEesM_W
z`P7Q1)P
zpvZh7gJHT-;$MbQ+Yr=Sk@h>)(H&UdCtvFq
zd{GkpId#ltcdpdj*ax=Rk*&TdG?=O%`)3hGD(pdWzfp>s;Zzbm=7HR1P1YS}^ae+a
zoLM{S1@V*HJBC;QTYE*banF=+xZRS}x}a;h$5z?!ff}-05fLK6r62bDKv}p`k`#zO
zH!~-1BHEHb^w`ZTD|vRZ%w0s(7|Stb|2t#E%lQr59?Qyw;(WyV{eT>Jq9j1opp<89
z{rgGxKIw<`%I^`M@oX_)6Uv=AFfh*}Lwgjk#$$DbMemx@a>vAF#~BewVM`94)q^)1
zp&&zSagJ{#^VRT)`V?0_n}aGxM4ktqLqaG_K=t5RQQTEfW
z*oXXWI)5ybUE}PSM@#kZ)_wBskDGgz>TjKPzP$d~cawM{1`28x{&hJAt+CgpN(kOw
zQed%EQvZ`#u3y%tF_@zIKxi{(RZvD
z=kTxwPHiDb*rwpb|#jy^1T+|*uQy%ch-_Y*pqx14BhCrz2|tw;{Cl0+z5
zT9Wftr)bU=>^nh;?8e{i=U?{Z5a~s8&nkIo#*XW1!lbsD_c%4Du94&d0#Gt5OQUXLW5#RfMqRXrCyq(u8e53l
zi8w%qjFm@avCoj{NPvd0m##u%gZ&kpDk%th!|z@H0LWB&L;Lj$*^jncf^RAW>T?%q
z=)}Y({&cM5|D#Fj@5U55TBd$9qHskbYVkm>BJ(nYTpWRyZ0o9*6+@_fDzq+MqeG?i
zeuOEeFAT>-f0-@b%|RSR`-(1+)J}o&hqn@$8t?iCXhI`l_hil3Qi7Mgs-X_BV1_Ur
zp1rpx#rYyAw@rZ^q_jfR1S-}}F4TaqD`c%$+~hi9n-OP<{#p6L=R%KH1a%&;)TN`V
z`aips<-f0Q9}-U0J{i(czbTG!GQBI>XJj=-vhxck)SyJ|zUp3f{;b&PYqSF%Z?PWs
zv-*8=bCeoR0ZQpc#Oeb8v*VJ|=*5${$ImP9xDfdfJp0@G<*uu3N5Y$$?Jx}&3bSnn
zaeEGqujlN}AKB!+*rSXBX52oS{jBJZ8=a~9>12q4W&-qYE_N*WPo`Nf29#L4C!Mpr
z(gne6M9#-}wP6|Uo-d$J6_Lzqyhks}5JS3h?4#`ENs1CSaQ|u39Y&g+kL%u#j5p2*Kx*F&mB@30L{XQZ@KkjU6
zmAvrb38Ir)@QIzf%XonId50ZiZiS6zq%#pTm25#3?NIV{@nDC+uqPfg%8+pjZ1hG5
zKS2m&qI<0+MxiPrkKPB;O_QV?CpiL){Ym{Dfy%yVd
zP5E3B2N+sPvb{Xg>cyJ7?)AmBQkit7v&{N-82jQTNa`jq8l0wJlj{{9Or`em$IjEW
zfj>L+uB7ylpr4rZ&GnP&D%%lknNA?2F6FmwmjQ0*-pirqA;On}goMI^&x>SD$K#i<
zOS4m2(5>e0!-xt;pA$2ag-)ByG06xzHCC?uUMbl!*gkjpIQOQm!OoRl%Zjb5XxKwf
zYh=q4QhY4UYkl@5De}V|`O~;L&mwrStqqqK>*;yjgr|8ao2EkZB4T@o5vlq9imujO
zOC7k6zgwFmvmT4f-7XttikKP)@v`=FYxNiJZO!>~yoV{<*>%=i#;1`D6*`MW#Fs)Q
z|Ezd(>rFUq)3FQgx3^gpJ{QW6HDKlD4$)Nk-R-a&{k-gE5J&8Iur#ePH2&3AuafXY
zj&|tV&XEL)(4$!JHASVk5CMVr=iB%H?01y>7F#LrwruvpxcWYRbPBsvs-v|tDcDrN{qI9g
zvE}|ERlwjRyF(i3S$%d|LfLMIZdqxM>*3jC@FY)EFoF`uEL}D
zqWS^gSH+gnP*bzhG_jyi02wFdA(R6;#lt&_qdPk$zP2uPE-oG&xEgtm3T+R#*J_L+
zw^*3KTfoomB@Cp>opQ8wJ@jb!vUF52G2c2Ugtp*`IHX|j-ZD*)RbB^k^7_ZVAPtgh
zdrTQ1Dwmwt4>DT7X#03W^^W8=PDd!4q6~dZ3=weLJ{^^Q2v=|Gu!YSW+cEO6BG-5Gs?fjEr1gEiNtfHOC!=6`bKz`)4I5W_>X&@HCDn0_xAD
z5-t5Mbq%dg7E)6~8}1~J-LDX1y%FX6TIJKbi9O*zc9!w+^b=)bR%ub)L`9_XwytGB
zB&N)~L0Fa*cRGi1NF+h8ElVn$hiv$7V0YaBt375I<~XvUYHlrmokfyWRS(IV-H=xN
zD=*LXC)--|Z&^Ibz=$ZZu-W;=MO@DGLAOr>t#zX|7%5?D$pZPMe2qPtzbmAoj}Frj
z(Ynim)EmNM@1XYHQt&euE2{obGE3}2DqaQP<@6Sx42@jZNNr8RbPTV1>7Q=9fBM{g;y5aF!m55KIa!+TY%@QiW0ub8SoT&$fs{0RlL8R>
zjys(i$S>~IF&zyPnt8Y7-ClJCRo6>Vp;UgsRdv{p+I$tYM-@O{cH!S_@82o_;E0ZuoC8?EH=Wm=-=OK;BDcv6h;xe
zuP_D0Yb!rCdy7@7-vNG+T_p2DdIo88Ao8LePDN#&C3xInEMlxFTVUn22uF{(u@_0t
zjCVsdq$^^gfZ``}ZrUA0QK1J<_x7_<-OFFN+Pz1NV1szw(DVis-P1Xd%t3hTRRQ4U
zC*#sfScZj_uBR{!(y?EFSE(5h+fgX7FmCI!OzGj4mWHr&KtdDka)>gpn8&m7-huJ%)H
zugjZ2;Jo=)x
z4_i*e`+rvPFF0DAcYKg`s2pu$>#omMZ8f(gqCZtgJsy@2Kt*j}Fi)b7+`MZfWgCId
z<{wl=OFLB6vsY+~k|+aHy%>06C4gwu`^J;s80WkzYHZSfo=}0*@|izJE6b`=c8$x0
z18eBNXA@!#0gKO8j92pi>BN5Vfv`lHOh9NFjl
z9XSRVjvAhn?C2qV0t$n+h_>`u+I`QTCl?kP3@O+SBoFRV-zaP4fF3;t*91H>
z;`Mm!#mZ#6w?bBCA_Y==<1=2UTSuz^Exbc)ustX2PZ^mxyW{>C4~3;6r{
z)VNz#A4`tm;(vFdfOQRmtHQ_T)pQE#XNb(X+_`Dl(hwVTT=#UCc@0&5sZZRUG#J@L
zaaeiOW3U!s5#>^CQxiO&@!Zf`MsQ%kJ?~TB2+wHki?nPuWZtMjYr~c3!4i^OD)L+N
zgL|9vskP0rBGy`G_p?!VW)1hrxoK~Fi_tqCeM~uzuCNyzUs_7fSABPQ7f#1{wj}Q?
z*lDiEIWC7Y4bR{-SH5kOl)?{y!^?vQz}7wZXIj906@~eu`PBDvvczIbYLefzus`{o
zGaD0_zRLNtiRWU8|7NdKs_)XQOY_1teYOTa84(=1(+f*AV!U4gDSw%nc
zW@ss;$(CYuY`GS;XmNuf#IaQ3)gCr;FW4fw=bj&b#hfv*h`H*q&0ZO>1dVJ7dmyg2
zA>6QC9yL|nTx;j3LOeosVL)9`8xUafb(ty_Wp~x3ro2!GCQajI&luO?u1>0PVk4Sen#Zj6d|!QrScqD!izrq(8_
zOw7ot7)nMqwPGxTs*CY>XaxPwwZWCL*_M@iP&T}{u9p|vVCC!NkE!$9S8ox^iz$o^
zUxZp-J^+X>$+oIKZ(HYtRT>Z|-IgXA^rxX074y&RrxwA%P4BD|&QKyE>&l%YLolE0
zK94m06@Fn(pBxS`Sl9t!Z1;If*K%(Q2?bSkQAyJDpnW}IbDUpkmk_iqLf!cjr~AqB
z`i5mXi=%3y0ZP?Hx&4cUZLW$2*{LS@DO@TTYDDUn*L4Wj=nDXcxhQW`s4V
zd<)zjPGD3eP~6Ueo+0mZovH^c$wYIM$wk;a;zFxH!nHc{TV0AQJ0%v!lhW3*AHzi0
zYqkd7O?^!i%!PWkUMM$(Tp)`svNP46K>uMzSVX!Q>{!dbUAhO;L!NuAyKtcpbGo>$t70aP}6en
z)t;xLAdRL|#l$#iU3VO;Mpf@+%s@a?94RrLp$~vO
zx@=Q*_3{y4HJNqZ0kAzTZSA#G?FJb&icE}W62}xh?~c4B;q!6=418A>HcNfX%%fX~{f*D#TDZ|Bc2_(d9HbEZZwI7bc|&5zeM
zLvM8MqKasa$?i>0nqZ48h;XYTB|i;;pG|5l);|*f?mcy
z&|M_!f9cxj6G3JB;8k2tK6|*MKA3fRx9g#lR!77GTk84_sKJG%Oer<`Y
zc-EZ|()&e@W)R^>_yrRvufGq}II)p)L7rw*XiKr6qG_qHrm&V@7+w2hxB8ViBBD9B
z%7I2u+eCUKkY0(IK=Z>f@6LFaMuNwPLwpLPX|HLQjxOfIKUcK`1Sr=ymCn(V5Y6~x
zTxt?z{*nkAt-VZZkITgx>~-Ub8si^PLRWS&`uv%&u21H`pxg<=DgE8E7}P1jNLt}u
zS07Skj)XmZ*25ol?fUyo&+l@E2g+q3yC22q!p5a#6ymdrCYKv1%yQ<~*z$`!(ouc7BJNeZS96YO5Cxtj=Lf~wzRTF&s?*3b21FJE}hX6_P6IhI!ZkNT%Z4XvM$_d
z0=)3Y^B5}hpmc7Y#?IfX;yH~G+>iO=|EhcB0$A4xz>r&4_Q=Y8sgae*dkW3+PR&?!
zD!bv*7O_5h@!HaveGRj8baYGlu>QK=5m87`JY5tN3~^>SNyMn1*>*$N5X%*%}?W-yjkInV2*G{
zKuNKy99y+buuTcSwpaOKEbH16+!(4YHVP)T$%Pqzvg%$(CqWeg>n}Mh?}9+<`a|
z$8&OSQ|1UN!?;+C&6vX176y7qQ4db<#r&xV7j3GCz7aP+^7Hd^217A)NH%Vk%+
zn$zCo6&!mpT(Q1s)sd`258QS@^I~j$YYwodv9+5@V{^KToUBeH)!XB#+Rv=(ko>qV
zgPH}~ekH0c+9+tOB>I_YERFhn8>*`7x;-V%yi0y
zM&c;p?TozOOVSY7`?rzitR<;0bR8_u>oq-UOs0$Yxxkhlui8|&YqJx3O+5!WlgOFA
zizER{mbNf$vMYCSmPc(vq!pym(RrTJI8riywvufG=!-PmQN*TGWG8O$-x8c~jO;NP
zomZ2@&&}E$Dv#vw5D<9Kul>XF_fKod|CN(^Xf2lK`zv+GW-5N$LI}McWr3yThvjV}
zFrb#7KIBO7*YopQSCbO|!fBfb4=!6i%Yjcc2E#P;EG2ER;V0xKUJSVI01YMaG6{S||
z1iCUY>;NaeJ`Lh0bmwtcYCFJWbcYlh5&;cl*7IjRhH2i3XGom;1nl0$XnkpvG7e6E
zEv%~jU6=D)6LX67<<;q0+FKLmz
z7N@%N7$(4#A5?WuL~Ca?>{6JOFNb6`t{a`+NPI
zj=YI|2w&*Cc6UtgAB31i;a;d?+1`}eQ)lx#oDnF+jb#AgV30bzMmnu+M3-VM&v@L`
zZEv6y=6BdnudlsA5M5UXIO*ud^ugL|)!7T0Q^baynJs~AFS_-%4m65Opia9kCgF0z
zA+4Aro#CgRO77;^#^9ww`CPVcoZL(Z{|?pcW$IuE#2N?qsw2V@p+wke))?FGHU{56
zZ5l6a-tNrEikdl_yeSx(VIK3ub0{j_!nQ3B;Zy(U8)|^tMcSXqo{>-ek
zg=VD{8X=1;^0}HVJJ3>
zUUi;4RP7SR1`(UmlGd<^g@r;33%&M;>;UeysnqzhD{WG6lI+c$M$JO+e)Vk@-!pvA
z%+TDrvAA}_j_#2`TF^dbk;AI{n&*h#K$(!tvnHn861y45`R~BJXvvq6IU6EIk+jXS
z;rt9If#n0=6{B}}?l#VUe9Igk03%Ejlpx;~ZjO5d;sG!ep?&H$IRR;!<#Ze)B(q@2Tm6-2
zhaCu1GVb^dh~*~3r20AJfb?vUt~@r}qm0TuLnG!-nrE^sn3h(5ZBka|eF>ZPZcnl5}p!OyMEijpm7^v9ml`NEseJ@mqBo(5jZ*!1V-
zT_*es_N=54k~uclLOVF78qvM#)5-06l(UIA6OXhm(
zhWx_R)=PtT%Zu^&z|kl}ktgrylW3lAFDB9uyy45rPERhZKCn4ifM|a{KRr+EhZztg
z=!_=YXoio0+XUA2Q}rrV7OZeXBMYwO>!&xo;y#T`e8DYS#pN^IrOr$Rddw<&6jwTP
zz^$vZifYD8PaS3%{Z;xIqx~nn-W3Qzon20Bs=|?a*4aUpb-L%B+p2~@4p(}XRTsCp
z$U&Q3z@m{1-;5nkPMp~pb$UIB61`hRa|+xK1aatLSqa#2?pNRyk_$Ymk1tpzmcOD<
zi+8H7H`psVvBHdKv(8^~aWy1meqjk?xDT~uQBjU4-a>d_b+@Vyk?c&*086dRAqtFu
zo9Z({Va&;aVzFW33potVl%L$m!`Pd@9HWXBqo$rj?onM&=DHFNc{Gk)i30HwD*D?$
zm;*UJ|Lxd88uyo$R$>K{XQY(GpYn4;vGO|y(0KPP1lfixdb>T3`V*h+2ss>uChM9k
zbhxiDErY!h(y7&Su6Obl^h|VTylb`}Pp&%+(f+@aqTy2Y&_Xp~A#&z?yk2hpnPc9T!ebbBzb`zYYos3I9A6Tr5t}#kGu?%7a
zy*3-}+#b*1dEY=FU&s~@|H)yFeSg;&)v}|_Jfo;VZ5Ua>d7(&^j+m`snhZak9TE-l8&WgiM06F!vFvDQGWC_;^j44`d-WViKyDwY?sf5RCa>H`I^IpCoUt!
z=uh$rm|^eJl#3#6`9`~zcyjn{^d|FDNRm{h3l7P3y9Mt4q<_D>VvWSR+=B-@FVduch7VnY$S)8m*
z2g`X};oZ(Aoo}h%T1yS{_s<2z$TVFLL+jY}K+j0i$$l)N{(BN2~KuIzB;Mfb4-~u=bvmxVU1J7
zx{(8N(bp5A9s9nn{Hrkyl0R?NS6b8}Lbj;6s-vs4%pL%G
zx2y)5^Xytryb6lf+IAVYar-#qg!)2UrcnJ{}|=wKW?oFQ;?l@P{y9=>coDBX51JhPtcMQ
zQ?0w-Bd3rnQ9GaVsl6{3(fnGL8dqEYJXn|^oX5mG!&NM@3A{rB&3%z{BTDuEu=mzs
zac<3?C{Y3g2q6g$2^u`OHY6K|KnHgV5Zs+c5(sX=g9nF(Mw`YVXd?kaH{Q6rYa_Xx
zE#Lk2neUu?XP!AT=g!T4?*r>yZ>`l;zmip}s_RKwb;1k&m&i>r%IFZS2L34vfVkS^
zCVwnUWw^_!CsheaN4TfwB-7YHYGd~>AkYp{)al?QHU>9f@}HchMy3Atcu$NN$9MyF
zoko#H><+aV)^9Ou(lj1usA1nhDc01BXljfNO^{jSx_*@;eDFym=#7lYEX6IZw7HA{
z?*&x&lYSN5FL@|WyOHBYW8{b$2|uIsjoS`&5QdJJ@fQtGF7mg?Q{t7aC;$v?cN;=W
z3PZ#LXJD)4XMrYiHE3%8SpYarc9Jd^jQ^Mjm;cE(a;F*5Xa(%ggT}fZJ~c}5#vV|l
zyIdZLJE)n7!pb+=QEPIfQZ0X;?@^v$om!AqZoK|M?sjqYF;Z1!hd*98I43`??iI;n
z^{6okoi=P9k~gE>fHZo+A6P_2C-T;bYj%y3=%coI(;A5fLfxC+etWjJV1D+nUJ42=
z$$#`ZKNPwh4So=W_4S)caBvmra-g+&xz^FK$T}Op7pn`mX!qH=k&U8rv?u;8riK|E
z$H`=e!<-~dkeIwi{RvfX6aJ=KJ_XgN&%Nj7kgqrCkPefQzNw
z{c24$pt_>+>&3)S(?yek8yt2xmR+*$R>_O^3Hve3=laEE26_HJXfRd^#Ndxm?FC3iy3_G3j8KKEnZpQ
zsv<{mIC06>kCqnQdiIYhFT&0;?}|niUV3$jVO(Z8wN
z9$zyTm+2(lO~HLm&&KsR_aV0@RohFWM1H4jH%e@ikO>ihOW3?|?5gO}lSJ6tQ!H|m
zApVCwFM}LGn_>3DB+UsTdG0O4x~Y78&R?O(x{q>lukd6;%yMJsDpx5f9c85*nu(!@
zMtX&EKCIQ-;#t#pdB9xxL@|!xN|wl(9#+OUFO9PW}Io2+G
zI+P!i9y4f1G~SrmD>|#u^U=-?s3P%lUJ!q2jxcYx6cqloa4G7jtTcQQ#H14~zpRo-
z_u%?tUJQMe90RC9io_Na=S@fLUX~bT1K8dE3i>{dedBxDM*;?#);QUH;8Jz51kDv&>XE+
zxxUfs!I&OP4zAM~BcL|U=3jCKTukWr-4}B{p38m1o*dFSg^$&?KD)&Pdr%*1D@RUf
zd7DC@Smfog~6V
z_gx*jWT_JgbGOW^ZdKJ#H7+{Vj_DT{)aik9i@-&mvD&6W&QqY?8mV`LH)L+7Os6^1=pshtr9Gt7~Rf
z2l2eR!b8i%qBl@s0_AQ}H!`kkPBgTg1++9)aSq&0=C2M9Z%P5BE;erI>?B+`%6Wt(
zrdN-^&Yvx~s=W{@4SNI3*4mr$=lVuHvwZsIs2rthMv+?qcW4}Wl2OX|n~^z5(e9_4
zLkr})Zx`eB0*BIYEjJ77eqbqOw!s^c*8OswA{OeaQ=NNvX{1nwjk)I41JK5uyLsT@
z)1Dg{UxF(6iAUN=m&V5ljcCZ|GfW{DRq2c+Po@EKd8ao<9wBrWY+mS*QRJJ(2*gQD
zPBjYNzyJQ#tqekYZrZg4m>mt7)SHw_Ox2+8o{Hg!tKxFl$CE^APq13E_hga&tp1>H
zjiT5hv^rR>A67oOlGy5eINecx{AjO}PP=o;;FK2&;L)?UQki1t!+%nysAE+&If=v{
zup*_0L`MhvJ5#)lgu78;5_X=~0dq)SCqGI*U-y$O!Av!8oWrLKbvAbL=#b?zaXJS5LQvDL7!=AD@k=
z4Z00i`N^W(JRx~UNTjp5O(~{yjH0a+yE;y3m8PIrHtF7k*4_(hIQ5KPxLoU=E~l5k
ztUce##1tDp%VdQ^VdBkhraWf?GFCm{gFeuWUA=E%y(l_-U1CaAMMd7DMZ0(Tw+ciI
z&9}g*zldNm+-6D
z=qH@k?$z|O>jVmn6{E&#rxcG(!}v&PlYr+#tcTEIQr-+tl*hu7x(PouF@-85#d5!D
z#%>D}O`jSkmGaMe-ix=fs#tr%n1YOTSNJfYPY|
zG!KP5jU9OCBl)Q=+L;ePb>U=BUaX|?`e{bFnu^l*wG2E7hxu`xS7cNhv|-<#z}x3o
zeTa^x{Dk?tvOh8KCa
z&M5gf9e4W+(mMkdeUm$gm$#h&Y5o~%M-dbC7TR2+Y)K_#)^BqPof{ftuyau3jx)7p
zPtxrojlhG#jUZx;lYI9*@w}Z+Mtd6{hgtaQRl-|*wWY+>&!o>`7gQ*a-$c
zaFDZLVh)uH!U#%vE2!r7!HN>7fkgJokU!vXCH$Jha9WQ#Y)blTyJj9Pb8Vr)=yvt4
z->bYz%yDCb;k!jH()F&#OuFocjInRN#mci=9yR!dNJ^o^oc`he{w&{i!{=S|40Ic0
z=Y|K-uZINOw6aX6*uz{$@eGJEDK8Qj$-zYb#di%4lAi0ZfQ{GH-P2Tkig-Zy)m-C(
zt{zs%kDk(soGPZsjUi0Za^`8-xkB9k{TR>wNR$x&#POKU9DboY0QS9XT9H02+(joA
z_f_L>)GrHmKU7y*S9rBUDLLmspgI6Q6K)9S5XSq~M*#MJA7nrB}bZiH&q^;V|2vqX?as
zu9&CAm51@y)w91n8$_N~aCk!bX}@!AE)LrJf3P-)odjP{6hb?BY+QEisGj?2zu7gQ
zdQT1r5Mx!MMdVeKyOn+PVQD`m|Ud
ztI6h^o+87iVlhX$+br`&yXpX&g}a&39J5xNh$u^~z0Z?ZQY0Llk|zJMoEZLCwLT;3
z2})incf%#u-GbRP<_Lj{R9fNN;c%9n^Kj2yctyIst4dR*`U7jCY%_C>ge!Ylef%@-
zp(~Tp_QtVa0H74_C={We9vnoB9}0aM8`h&Z!QQ*WzCJmShCUX*O1ZAP{vg(b$^LrR
zQtJ0buPdx2?m}Ses`50|P?(DKu;r@W@J9WqYHoj@6K@GxK2^TmDzDhvt_TF~mzWt9
z73FIVxaGqLUCn$aG8!+bPs#Bx3YSX%-h}<-)B(!e&X(ZQ+b5isYJx9wPZ0|NhSoU)=cJs(P$rrMd+R@a_ZL
zCsOUA4g3J1YPBBecy39hJ>F`QlCUjYFEiOkPC@@@Jl0!*DY}mOpof;7Oi9%}X5Hd@
zL2#6gRW~hdsKXzj7XyZr=els-NTcK0c@r?-9X8JgT!>6VBh?57ac~&xTZ{Q0Sd(&`
zgLKaun`Ia5A4OYZL*TdqfSr1~*B+tG`2>Er72eS?Q!0P~u^P&R3QAUt{|`nvrMcu$
zpk3&Z29SMIoYx=SUzjg$X*g|gP2dYOuljvrqh-wr@}Dj0FM@ILpdp;UolbSj`P7O}
zHAP&r`g#{zvTmB5x~g0ZJY~5DQCpp-k}z_L&8)vUqajvMh^K<6$ou}+U3x`amMrZQ?+TH#xC
z4-G|a4k*RPR*)sx`0aJEz`AX3_*Jgzk>xI9NX`p`&8(%NQ+zb8K2w{?xh
zP3yT!8`nOS>1kwTX`UNboWYHp0!3H6ek}AQESu-iHv-EY*0&k7ZxA{;aS;=|6(kAb
zIh-cXx+~rB*r4Z$soXLf7x|Z)q%}E${RT{*%Yuu766M3b{r#-{KZj@kW3iyZ8Cum2
zW#>dj72Yp_H6f7xp3NkbXs-%iRtyPJfOp*
zR+iHpW9~#V2$5FG5PjAx0U&TwkgmYxTXy~3sLDhclhB#ko>Pf-sC(4$lG|vX=d=eq
z^)-A)Y!@xIo*)nuG|(Z(5;J6Yl7#1$mseX1aD^R9;RbCxzIT9YGGZGsg`a?%{Th4)
z(EOKu{b#&&ncBK43Dv;y*F+MRm^;|D&s)e&?T>?JlU}0dJQ${YnJCesOMRwF#L7>YiR>7qLow>MRsa;ayQLU%{^XfeRt+k>?3#!(ar{qF#S-we6U;0e!ib>$cbA?bTLz&rUJvbD8Pf0)=@>lD?iWtL}65xi_44JIf>T<
zf_=VMOO(Xlcu3*IRV9f%lhY{Qh(H)cwSc~rOW?M*?FIcEIEUbJ2e;hu$;k;P5ke`#
z!`2n*(0eG~@4T(wDB>e>jj0Us;)-3tXsgIY(^9n76Ub}cB`}NQS39XFMsPZ`j(Al^
z1}IKAy)d?Or)p2twX}|8px{)C&X{8YrL3(6MnnK=Z$GJPG622M0gAB^#KNr7g}ibO
z17YVfY}mJJUw_w)#Ui-9TtI)HMkjKIFD3s7eV2RQ>Puvk2^G6Zc$6#wzV)pXs{XWA
zKtTBkXXaan^SA;H;Zj0H;P(p}YapJA;5U4!cg>a1IN)dsomaz4yJ_@v?i|cI%nLWw
zHpNPJ_>;PtYGr9fTN-xPco)_;=lPu;BZqb%afN^Q+iJz;>{XDX8Qi!PDU!5J9j|mS3P;*s9-5F_9Hgq<~MR4x!Jkwryb8
zoHBx4w}YWA`Zje4?R6WQkA1h8i#M#yqTJ;V_B(lA65S>JdaFE`(pe|K!*xri{%8_U
zZ_2H~kv+1#(vq;=FJy`1sZ(l=Gr4n0LDRv7-a
zcG8;o(10Y&5a_==dEpnlce#j`zj~&EdH|v`lRvUQT3yz4(Yz?ym?deDa+8$W91Q>0
zxdmht?3(Ia1&&9iTi4tJ&p$Eb3KiU@^v@kur!7sdyc#nJE`;dpReg&(>FszIp2NQB
z{-rb|TyG0An^D;#pV!TATGwPf&xA~d^F6eciL*XAIh={AS!H7*<=0FpCw+-Fb>pqx
zX_%)?Y8mAFn7WHEs7gvXe*34u^#92ln%kVa^lX5pyCMyR8hWgf+e$`IqF?R~Nn0O`xlr)W~nN?8d
zW#ng=&uXgXu%yCIV6dE<>j&F;*4%$ON(lpQ}bgZ2{%jC$6+?V(@F
zMq$!`W{Xz$DGZuypB?=?xX|8^Gfn6`Xc~0fWn%56ZCr+-8t#PzVXj5~yIgQgSt&Vp
zma!t}9uOFt*D@>R(2i-lM6$S}*FJSfceAufS$zXJo`K9}eNQ@@S
zBOL5!rp%nKYG*bDrRGKO&!?j$du84PD-^a}hSK#lR;LfuG=`JNb%suu=C8KgX-hS7
zlsLZas21T?^kcga5gC2Pn1Ci6{8}5%?EG|b(5O}KPSYVJ9tZbOMQ?!UYi>17Np9KP
zz!f1aos|>+#v(Jd=+;@o~9OZWL1(G5nJok0Us@>$mKh(G^DVz1;^kYHxs7aUXEFiHmL#vX)KI5!LWZ&h|wG8kg^w?smWdOM3
z@&l_j>v_eThkaFa5%K=@=pi_>h0~KC4Ye~|WjYY{n*tU~FJC+P(G^^E;z;g^3QWL<
zgQHJs($%icK|M7iIZl{cE8;Q8>xJJbi2H*ArVsPY17f+Ne$|Z|1-pGSip>y;r1PH3
zsLWI1jiEZfw9M}HA6SmRDgWWdK3lwktg4Iq8XVaE6I~G2Q&k5$WnuDkWi|5ofZ^&-
znSt*gKa$jXE$sfrAXggXY^A1c7FsxVvb+mWV5^c{e;0!Qta3O<$%$3UAB4aNbZr~T
zLqd%H=@%&is;kO8&xp;|qNj?ETrQdEd2dn*}YYNLW>wQOo087?+gt9Q-FS5`KCl
zMfU@1lyD<+Jt=O8KKdGycCPOCx*pJPfG0}wUe}rGB%^ajT)AZkF5QUQ9X=ayL?fbC
zF&8+>*5fu6#4~5XE&2MSCU~oAPrTiu4z9wdWL8#ld~HuRyv>DuEX@xujx~>Zj`K1H
zcSj779N`=OuCGKre;+7j=OwT*>s!#_TrisGC*FejZl;d*<@J^N757?mA(I+0{PQm7
zcvJgd6UzMePgq*$#V!^)Kxg1s-Ja?_7UkPg!|~xK4aVCgHVJ7Ma+NaIPII8S1@{3d
zKd>;wShPS2uf2RB*9l^b4O+cP_)Gd5^)nR7@&!rlbftU6GL!yBsgNnM!q>0@6xUFNP;`)y}B=lH^(BblU+2`h`~6EjqXWX26HVk01Cr1
z`xey&UR5vNyHLLRL9F{&>@A40mcM}vOQUW0PqekW3>(ihJ}uZM=iIas&&VwH%LD!e
zVD=a+QX}pfZ}|zLOBx*)giYchLwY{I!QaRp~Fb`6Vg8
zo0z}A;TORE8}0K89R7Ez(N{y9p9h*TiH1%s`Px>#5&J4#w85HtP``?)!J4gNub+NR
z7JEfRMr>vUD16NY&&W8#N(&^u4cw2(xrQB{FQXgKYG~BpYSPB;y2jp5r%a;ja~bP+
zQ`cbkcJzrj#&!Dl28vpS9W;eciOJabRbWh%NSfoC%t6kPSwz9;jGt(Wrk{LG@b5;|
zYt4i$gZTpyldI^N%nnQ)PDtamr*G+X!W-}!QkBQ!>6ni!AXn$Wm%1T#<_e>6*dWDW
zN*e~9J9J_}HkNSKoYVZ4k5R4wVoEtC!&o4`ROTOlE^(T53cmDSbS_(5BrYYkBU89F=Cy;
z+v$ms5E?p|`1sZOrF8UPQmndZFP>po+>)o;j)_y;-p^<4{TY3rsakNy6hpb8raVB^Di8TLk
zFI)^U@{K$DN8Ey(MgTx@_|s_;LjEP2e;kAw?7w4z=ib@aNO*Fu>KxA3$Lgol<$qxa?4}XJ
zc(3x$Kik~?s!$Q1gTV%tah&%UXpzA{i+afMoqdijHI<(uqz=Vs$T2|TfB_Or#|sTR
z6Xw;Q@Kc$r5K)kUm3G6c*NlTZ!{esIolWNW+Fno0OC%-vDvQ5{{r_@98uPuycx!t-
ze&?Ozw_5`$Nk4U%$tdv+3`;4`8+xeg-8l_z<=~E&@Fw{(q8i-lGynV@JXcbSk%*+t
zA&6{$W@IVzk#l*uaIvNiG##g;wx{FNDeOt6lEnP{LSg6I!nwlUW?K0dQIMwY8p7b>
z@M7{uw98C&bbRzBk@<4eds@hmI>iRF
z$9koY)$iiIM)M9)z96J&78{{3e2Nm!BTt?NBq-|kCecWGxYw-747+KrZDgpcS}M-=
zL@lp-gCOeykCiTmcr)pdRowt5wY$Du2@)G8ethCde$v&noJ^buLfPD%V${W_%eP*#
zM>NI^=F&f~FwtS#mg0%a;cNXXavy`im4buawb5Lu=rjUMG0>@kz1VZ2a^IhMKm21O
zTh~@UusE(G#mdYNHP79TtW~nT=Uk!(#FoWB!n-2_eoy;>HUIfv%VUsuN=si$j!pvc
z>aAQ~$5ZA@x+Uq>-;d)_hMHC9#g`3eUUXAtzv1%i5JW!o@B>0z@FM=2=zz}XD)=X9
zWf;;%{vxgHCuw<-=U>-p(tLXT?)|@{%sXUU{AZ>B#X_n}zm%xzd311ziD5MJ05?yx
z1K39uxMa92zQ*o@x!&1&)UwU?11sfm+c6Za4P&@HZAbmumpDKyY%7p4fwPG-B<+rmg0qW?JWCMe!KF_#aqbGS!ghBF72w1)I#u3&dII;9pbxMZy$8MwEY*XSja4Nu1KP~d(P&xFDg4{^J_Ph#y{pa0jIZkD*yyvhc&Z2S`@5jw*^j9fQ#aE=g5Ah
z{mhul4dR^B7riICuEcPnb`$Vc&#|aqf{l^HduQ3F5&j}$4HFkSiHN+>?@4)%261o`
zH<7Pu8=ErUcebwXivKai`byl{VE46aj8x0$U~<76v<{>lbtrdfzT_wDnS0H1Af9fj
zEIe^Yji-=Q{dt!+v&&cJu;33WMx}@$nOwhK`L$!e80MF}{DO;LX!$>+EDV!PC?g`N
z(dT1QXBvLq#3dM=GVBS`Hu*y}x%>$(&70Ymtm4f$|KA&Bg3+b_0rl|i>z`}IQ
zyVI;7H|UF(VtYfHhz5%XeZC(aoNipk3r4KMi>cAi?m;6{?WNXU*%Xk#owGsvEcIz)
z!(?+@;QT-v>Fu*Jq16xH${b!XD4b~t5g8NbY|UsmQXBm2L!kD=aV+vbnLDXbk+MRbUm
zW@uEj;0Q{o*h{|E^5W9YEoow?`I}F+`RHl@Wih4AIB%I>>lUnE)JntdjV|2IJdr}u
z%zOFGYPx!4GN2<#!Y8a{bZDBJR&@XFiG}|2U?4bZ;s=(gKG!u#!PU{mzL>%>;r$6i
zTf$j`L-xPx$BrvCx4{eA_2|7O@!f(E8Jizil^macVBsOJ(Z7E(ILM|97Q9>LnfP~e
z{jD!p#QZA81%76bd5YY~f%#34y!H#kT-)>!ZUn|&Nwo88q9jho8vFiq2>(R#3UPI+
zs_X80lS@wE#rm-_N_;CkU%c(;2Uc^s0aK4})_f}KcGkt_j9KF!(4S!`9&s7Hs+IY-
zMg8+~mCA^hTHfsSC!Bo0I^N};!Mxxdy$Zy5onkVFCBVNgsz>M8AhD^IyRV2{6PvnK
zL7TE*DYoMIn15rOerJ5~78=nbpKE%~%ygE3p_mk-dxD1dcg(RTr`W<+>L)0CF)r;s
z*TXj>GK230y-@vcekxP*1hVyKh178lJF5gEf}<(TdRICR}w>zY{!6rSmqM2AO^JK+$jzaHZKNFMSB$Fap^oUoOz^{(NwwUC%ufqRExMh?$By9Dh9re&EM(XJKptaB_in`^!gVU
z;fWjEuL&_7qb$uYzn4C4YQQvcMf|{mR$W_Y;>{@kz%r-#O|%JEdi9Lx@y9M5LN|Uc|%3}NeBd#MV=H0n-o}3{qt
zA;YKMgTq}AN#I)zR=atkC$ImT`UL6=;8>nuYQ{70y~J9jF6C%U4NT-G%{&u1W)pPP
z`0iv`f~{7CNT8C1w&*(n44b0E3d3>6c~h!hsBnFkUz?qrjqdcZ>}{%-NaS~mvR(2C
zr$)f$*?LzQON5JR6F&432kt%IOQ6MuQ*y>sAbZCrCU?U-Jsq|2^aM=`99DKD#w(c3
zG@0b7Y=#wTjZKL{#)Sxwn=IM1NV`>S`h-uClHC7-0sotY{O6U<{#koUs#sWRhh2Jh
zjf}$jGu)+7bV#MqtpmYBAJ8H23DDWka>-Ba0j|iw-yUDxwk?n_nFBBGi>svAo*XDt
zH<4IB)15$Aue+5N$k`rdWi(TEsyjIlMx|c`#y}51!Jc9vqUD~8NxLaQ7e&_kj>9Bg
z4S@=w05i!_PqH1dE$Umb@NBg2t#{ui_LOt07tUG+>GoIUy!4@HmR)ul8B7y*qTfNh6u
z0_+&<^0NNwMqyUW-lUC6NNc=Sth`dJwzF)2E@rQaz7N@s1_C
zer+k>2Uf=g=i2PihwwHN%dPZ0<$*})oF~&$^rzM>tX|qXL&dBG6Zb+IiO^~Vylfdf
z6d1R|N6I+Y4`|%$Aie`;jy_3V1Tlxwj}+4@rWk&G#^86(-Ji-Uy0IZP0+sMW+!K~3~HlI2lv*Rjf$@AvaGjnQuAbQLY)HkVES}=N3cls3aq?>+Y
zF*Nw&u&A?;yM@J)kTd;B#ABht`YkG$vsq%|cSE9$w0X((mw-%Le4&%23(d)i6(k7z
z5p31fNzN`9Vef8mvY&Y?lxlFaZrz8KEHZ28K0gg!aC@7p`5mEN%+Zvt|A<}HRt+A^
z!<+v}nH=kAhXzCt`7zCew83uS%5T%ea%W&_ysBopS*Md9p)|Ewe
z#L8rQnw~5<=|FEPVXYLa!qxTp0L>&qJD6sRuQ`?|7qB@slt?6ohb;loNSDY*)anl4
zBgz#l`ofqmjM%UK&+LD4$%k4tWk2`ADU^1$_arRbm(=FaTAVaETWO0_SM`=;*SKK?)DiIzaFZL{wb>Hy+|Kb8)J@--1rbpH`Yo4WuXL
zo7O{C@=SlyyU}_&Iy5^iZc@?Qalr>p3>oMRl6@NTLX@X?zMCr7k=h5WtSbXcgJ
zZwl>3ldaf_s&n717iet2XXF;*O*1+hH>pYBr=WDTaV_H$}unlq`Apte(Lq3!?NWM_K?adje;-aGJ=2UOZ>h7lCS_4qd
ze#!9+ayzd3#!Pxz*m}x3L`2ylzh=GZnZ8rT8|S6(NkU5|oQW@SZm)i7-NU-GP>Qmi
zZekTFC3njoaS9LpR9||t$2gAcPU%+;doV&rUDgM;3
zVYr%~4zZl)`Nk^1tv}findH+jU?C}Wh@8N{sM7ZAnOM?QUgqI%wHhb8moy63h{5wL
zJx))Vt2Cc`2ghO!M;|3Mh!})PWblFN^vBWOF1#Jsi3i+*C%n|V+NVvP#KOrZupU;3
z>!V?SsX;hAuKq1@gR^yYci9_(s2_u=Xd*Ij>Qj;f-Vf$e&Ji|!*khNKW1>GasCQkr
zVPl{M$D66-ItwuPP%pKJiU4_V`S`mS%d}OLKT@k@Z-Zz010cMUJ-O13aR$cEm7_2-B6)u7*rjC6gL)8*0an7iTW
zTo;1M_=;^`p7}=SMLQDpIaIyiu{2TS(rKBzj{Wk)H&lY>Rv1@-kZ@HTRFg&m!^M+U
zZ|?~{4OnPq?=&Cg$8QhH9?`d%i-}y^n30GkaO@bn|3F%%xTYngV-3J8BU4zqH$`VA
zISTLU_CUo1J3hGd+QY75&_3`SDN<+!7q#VB^FiLl*=>GLZ@Eb=qBgJE##}pqBU;mh
zv}6@m;LEapPrxn+2&Mv~J8ek9I~ghvpHa%sP13Mmi0m&0LO1!Y>Ju0F@-db>I4^&}
z#WqpvY~m?prEZk17@6`knNQV_HEz9#enVK|@^drMkMlz};<|};l
zg(CZ0W4%0IKOJwhsW&BdE+tF@b`gIy-n5@K;Dq=#{GliT|U%4Q=>3Eqd_uU
z9#w^s{&qLRML%O-RvS1TONB#=W>VDU%%a-dqTo{Vd%3T-A?*dOo!R^DZfQBNdzLA1
z{`9#hvRg9dcL7B2WmiCt@k+rJ79tUDx;`kLSrtk7m+eu%1oQ{Fy1iMRkL2piYfUgeW+kLrYN6nP4^5^=O8V@{dMK3q8YxPmKqZAQ
zX@WIKL=f5GaAPumdPmX`iN5>5oaOiAcN)7KRl_&vADT6|3{@j=?
z@<{9%5sBdJA7)6C48=-Jg=E`mQ!B(`oBrg^vONC+a#ay{J63>8`IgF7ls0AR?*0Rx
z1(<_}<=g!SSyTs>zCL$I!TasX36{RSb)wO>E^AeIF7bb2)gkjTTlMQzhsu9yx?2fW%ho^bgbd)b+(r!)n6l4w*s%Yq((kQ8g
zKCdr;*1w<$Ce5Ai(;EX_Q_X8~M7&b-aMc%v)kkJDog$};1dsfca2vAG4HLZ=4Un?s
z2a3!bA!f04^`Xfn4AX|$3kw58?O$b{dQ@E-$kW5@P~Vl+Em?~S^P?o#Dy0`zmJ&lI
zU!KXal#abYZSZ!2iY<*}D%F}|Ny;h9xq`93nkJCiBrnbf=6S$*O?MLO#V5xMl@f>3
zVDT@UJJg_gmQvbHe9QTn*W?Y@WUcUbZ*GEa05%=hBdu*l9#=mR+`dUl7gGQ9V2p3y
z|1O?m&;eZ%*Cb?RBoR}OKUiLOYyMMkMV0*6;)lW3fqM*7AuGUOr|6IuO=^zRkLqCu
zv#jVTh@VnD+5P}sNdgVFC!(o}eQMYKU4D+?OAbK``iwc)-8EhI(arw)HD(=cH9ad@
z`)v9-XF1V^Za17gZ9#X&k^Afg$P|N8=^7Zn^!ViLu3%zKXyFhB#1@JRO>4Gb(<4U;
z<>UJh9q2PdLa9E!v)qLAnkx0*Wk#NtBQ|eD{jqHcIFWSyGeWr0kwipr8#{@%z&*sG
zIwJ;LmNCM|t}m)0#>M8%-E~61c2kBwLt^$gN{t_OjBlHFlK2Kj^8N0tb}?2Y
znv>>$BZ$!WO&-)z1;QuntO%E`a&y!5bB(0b7>B6dQptNRIKa*XcH7==-nE3RVftc{
zheDGIgpOQ}8JYWTtc=F;d>EvxTg-U80*h1ZakGZ@={(&C*8Y0WTsv-@Fi1qm+e+1C
z7)lO<aIiDXj$6;+2x7%z
zl$^(~8-7z1p5mR7W|^vzjm2lRc8(pZl(9;LWmOHaSzcL{o7-Fr2h&P)C4o`wj##2X
zjo<9xb~5Hr8XdK@Ee$WV;v$W(hR94WVEE3_xP+bDa*;}SB(n&!;aMqli*^wS;vUu~
z2M{jGODvz$xMTjL-6eF%GT}6EN>q=D
zDjCjDag>-)-45XxuIA!?ryJrbszUHAm@@bQ$U_=i>@Xp{&U#WoAEBVX0@u9r+%dA6
z(43fNfg;NGT%PE1HLyHR!Ml;s)yW2eX`%X0s#ar~
zRWl8wl2Y0{Hrou=`4z)MwW~c~?%BJw<|qCI3c5D)q5^KGw{HBvB8ADLcV(=EQ@P{3
zQ;zvtZmsA#;ZppTt%p3$ZKLIw==q0(_rJ5Y9H#E~|5I>>MV;w^=$Wy)npN}nUC>Dh
zWQBT>IwY*Eyu5z0xpX9l^Hd(k3!EZirY_0Zg)z*5LM28Tu>c%|Ea-BWu?%PT9L@Dt8$Wcvy48icwA`_HE9C
zKKck3Ob5yZZ%4GCScpRp!83i<8tYFQ@+%ifdFC?XcKHKWz1cj$$7Wmkg)U?RVpDWn
zi|}x27Lea4T0vnwX_Iy5OHN)TS43Q2?b(8}!AoOHJCCzUuJ*KLi+=GTI*Z~HgQ#gh
z7#*mz3a+v_sB>LcZ66|DLY;W)R&?zaJLQ3srm!|2pm+N_N@aa=eJPQGIyc9b>A^Ck
zN(K+9*q6OiKliOSy%~!_DKl<)oU)OLr6asL+`$g)BLcdikgAt5K{YjHMQ)l9r$D2Hm`W4)D0t&NR~w-{U!gFu&C0Cxl{lCajZ#7y
z&`0Hqc;7GTv0>xd2lQh_2<{6YwkbtJdivO0-)^m^?8IEq*&)@u>Wdw=uWid>_Eqa5
z5)PWS;1pho(B6A}&WRC@0;4<(-%&AHr!3ztu0w{^PUT56OcJ&TB8LR;&u@7Um~;4k
zBBN|uEDb_QWVzavjGObBXUhYg?DQZ#~k
za%t$8kEUySCs?iMFDRJT!MPD6aZ_~8l|VP;PS$Z|F~tL3g)7&tD7Z;rhHmMag!qIZ-o5dVuU%(aLxps?-3D_Ua=g`Z-u}&zB=H4qwW51~F
zQgk2Em~bwx+1{10&WD7FLPvm_%EA6Xey$Z6zUFM5F{iEGo+HjDsVl2?Ph#9MUHQ`*
zP>it(d?w%8o}*MoxykU}bFiBZ*va_?V$I=6n%C47b}U`rFqC25(o4
zaz}%PPElb33T$fC{F4*6uzF~*d6NkPbQb68DZV7V#>&XnC}Wu@TMrwRU-guXlST+t1POk1IFfUI
zKZsYs2ptadTJue)>$g@&o5RAiS$X;NX+%JeFVB(jQ&_lj6UWrWb`fM$ve`GwlgArTeDM*k1+dMmE0##2?C=%rksT*tXmey|KzccE2&m&U^zMy3+yrz(29!0Rvmm
zj_kse*vc{k0;~0~1E$ergXT0jX^u|4BLJ%US1MKpAy1mtM$~tUGL^=y6c4m%l1(!{
zMA<|+?t1&b_<==T?zLAtmfc)BqbO6E&QMdoUurK^rL~b$;Fr*?gNn;e)Mf~#KURv2
ziXfmglAQv@L_AOa<~A#VHi(G_sj~qX-*HmBVc|hH_ptt^mOgwm=3B$Z
z8m3x%Y@rfM=P7b*PeHs7UQg^t#_Z6zo9V-&0_3Q9gh21O1zmBWOBBO*<>LpAwXvk;
zg{vEcg2x@qHSqg-9^iE=ijy5tfZTHe9b%2~H`XGPxC|QAxv-jO7*5XCO_=93KA
zc@O9(T^G-eYZy}$fRT$xSZprqv%f2^6RtRT^Lj&@&(KzCp47wl+JUPQFd#am@L@%csWGl!K3?vBWn|w8
z_&PNrc9RwVOYNSjE|m&)L}gvUTi1Ph5@j-05s?p)@cm?c`L
z=()?gTuri9;`*2d?9yS9Qb#5S9+HySR@=S<+tssHHomS1{*B}vx3$$mu#2HNXG|Tv
z+zu*=L+hy%o{C+8ROG9IOu*_Z*P2vI&QC*k-+|NXNUf#iQlTeUJNm)UBe%gHSUUYo
z*Gnotu)=Yb9ctg`Smf8~Z9dD*%{Pv<%=a)M9h#IA^*=A+Z|1}fPyLvx1e5`LUAxmj
zHjn6xx2HpYBMp6vlsr&M@=?r(pHOeAR(2YbZ4ca7|$N^BUJ7+1^m
zBIv6Jw*njD2V#(9$@Z8oE?qKlq@QX#=CD?21iYfd+U)X9`pU^44cVTA+X`g#eKE7~
zo)29vAc$G+-1Q?+xUt-Qxb$jI(55O!iPwa|04QfLe?||R
zRTW9S%g)YI5%8}@L@s(-KUq3jZgPr9p;Pb7qaEX{RAN(oZDeMr`_%x){+&lf$Grir
zn22TX%C$)KLI{b-abh1py?KyES62j2;;kJHQ}Ug0tXPUzZ0?$V;57p@a~u8xYXxY4
z2KZ?~+J0bJm;AuWDgy$FHF#Ond&|g^MM@K{nBe7CxUHj;f_fB1Y}F3E4PN?kT}pkx
zVwVO?PwW(f9w;cLh&^5)l{&VhIJ-`M%`)HE94~E#EiP`YX2@Z|jRHdwXjDYJb`m!*
z380*xmzM(y5Y38{;UQlfr!;Y{_0ijpn@ITXXpJ`zyjEb@YbDXti)}Q4MYiX>qpcVC0ut8Ks^aj<2oG2A-7e1p5hPi#BG{
zdKDYP2af$Meso0#bjE@bx4|QOMe`#r*U=iykq1pYR>&h(tC{OJl2YryPk|tl+8*;J
z-JN~G;O`?+DhQEqYD)39l~SP$^hhS9+#*G_sH2^RXyivpLke;4JAWA!VA@_c_ZK50
zA&2r{WX~I8_0Kih9pT@>;d5Jt8aQ8?MJjv@DL=$#6gFx2S$(X0*S!q?;
zbMe`n!`|5{?yUUA#Y$u?MPO|1i^jWs#PCN>Pl{KW#6CYYlrF!KW_o#L6THw`}7q8
zH;?_1aApjv6zI!tseo!(&9}yz*CVyXiz^OE4Tis3sTKUzX%wn$4MiMO$ktk0xZEHt
z#wS62M_ck}9k!=JTd5*#3X~{?*G%aLh+dAHYs=!U(@=y<)u;l9^jUmmB~D@;?g3fd
z9i%u(?2c}twso^qX_1cjT9*IwmT~3#oS~9BfEeH*Q#|9y0OGJG
zpXVlQAR3>S7mILdyg0Syn^Jt`UM1z+sK1e)6Ivig!;zE+btNKps#AU`98Py*%?@{c
zD7s2m4$CeyCso`k%gTd&gMP%K-8t4j;B>$!%~h;)AAlk1Q8O=KmL_wcffdjDKkSIH
z0A~wWOW7U@S|~o#U-}$JwIPEG2`_MrO0r9IU74J;PS
z2-UT{p>kkhS@($*nDRuuNbBU4ChxyFT7m8)H4Z
zv>xc=mxTAlE{ugio{q(tHQS}QTB^E?q#7I!4sCYy>a!V|cvbt)O$Tyij`Bl(fovev
z&V+VE2Al7jSSKc;aJ=j3#tA1qgPbRavz)tQl2boaEJl149d$Z)3+a>ecq!VX+2oSn
zIh7((LvJ=75A0W8DJM((l^kEo*(cg)?Twd?WwrYr%r>><@RgCWYkKbbIo#)RvmcqV
zZ@AU0mUmBFF;O7}&XF0SPwDQZOq)c2JHpsHLFC^tVlDowNqgINESV?NPpy0XrRD&m
zAq$Q&*2@QHy|@#Zx=ubPwAoM*b~v`6W~UH{J@-|=oV}CZ(@Td81C6qB)UHfn0TUc^
z_OZ@OYvOgbpnpAR1UpjlN00oM#dPy77NF-pu%S3B^7tn^M3BH357eOQZ-xnlzQ6;i9kZdJb^hazz3T02IryR%8p{lp5lv*KQ1hYmqqac-v6nT)3)%M@^v8TP}1b2w;*mbfAqNOU4>7v
z(MGJSU!gzIP>t#u=m1RQo34XHj!;3povRjF5tG3H##Z#vCE#5LvG5Cx@DzoBwCYw@
zbkbnicYVu!61}aBHJHB;Ed|f_@6Dai*K{MjS3otgyz)u%u(D_;U>*nbt=_N6sJ79c
zbaKo=)6kJVkbdo_eUQ=y=a|EX#BfTipOJJOez_?(>4fXDI8T5Sv=;SCf^sYS$`xRP*~1I+5zFr7c-DTQ)Xs4eR{#PsY|(|`V^
ze>h}K#a7%hKf{#y`8P$1vamIk-X2{E^vBi5oHNCd(gqzEywB=$%$V#audJ0?-0HyS
zfmWIeb}(<<8K_(s{jxHK;YN1Y;tB04W`R!m1o92K>`tL5o5?TxW6(B&x2
zHBJ|Km1O2VO0chCj1BTWbhSLi03fh+OgVQ=wDqt3py5fLq#7^XgYV@cEWz@U7xDB=wyd0V~v)zJbDuaE@*Abd%l
zrrob#D#p5dlGIo^bDmZkP`FJ0;5s$QbKl8wyKgDaHlr}@M@5HIz`nx{0ZpHdxQ0j5
z^ozwJxK7g|b;#p`*v_G!Gyq3Y_e-*ZF^{3uLW@m{VupZ-{Ns?1!qMm5N}j^5L^@}c
zF0?~Ux-WEOw3KNfDu4-cp^C+v?+*AYp0ZjneTEJNVvQGdvQ`2yT9$cbm^}VO?(3+I
zPT2sKrQD@ex7udG{00&{vz&>^P)k@ILVc_m680~pGO{KdIUp@MWj(jSCkN#f5
z*WKE%+2HW@8MG)$sJ@~pN+;bspyNBq@HckVmhpDYPBpbob*mTGd@<1EPzbGV50iJo<)al#_hKy*EWbQa49R@iKO2;Q6*aHrYUie(
z780ISwLL(rn(kX*ief@k;1AZbV5-W?C-Qi3ThA?@TmNZpDHkW&pJce_!{dA2tBtFTbl^u6{-FIR@g;~O+~raXx77}6-y*C%
z)09xNe+F(G)mkc%3r#0^f7Ws{Y7NIgV8|}t0!kEaUW5%{B8&@)VV7R>OW(3;Xw4lE
zrwxr7Oplu5rR&5O)&$7{W5m7u&L#&~D(j|7P7*w{jhxs9f;};#OZ_z}R~|)icuw-5
z#=csU7TB8g00tv(JjYiW=+tmN$~#^qgD=!3i5FmiIS6k7<0jXonho>U1{$}3TB%#W
zt1wcS-HER4+CV&qO;lilaO94Yvc#aRc>l)^ZEZFI3)JJFfyp)3JUEVSM9!5b8;pR)I
zho^`@MYGSpjZ679kEbECM|40N}3p1+!&y&etEKX<}lj^E#BJRLv#xg&SZF
zLRL~$l5(2Xw<;c}NyIf!b3>a8fy%B|RZ&*K{tizH3AiG}K6>in5*c9*ks(z|8X0%i
zato(Xih&jTGE5u*?$CA~oVo>2!)?1z(6sM*&$CN8C>}d}LwPp^O9He@70YeW3G|Gf
z#`(FuT%ls=JcM$@;&msEcy`?&ULu41(VQ0|F-jxWPF|>O*JRY4YW9&poD$Wqx=rQH
zT<;QQT1)XTkd`dB0Gd@lr0rEl+)mn+3ZvQf2qDz9w%M(H-=Q=T?yjf|FMrFI=
zMa^W4#L~zw1J|o|_Ypma*zq+^_LK|ysLO-=<{J8Ayb&(crJ%&_n>!1VXy{n7oYCo5
z^q^bPvCkZXgFZuw5Ul
z8pG+9rVC0Mg1hX(Wk{ttGm7o%jhNd$Z_z;=ma?~w_FcQT|R+du;DUotW4a`tpCR_v#;r!vAy7EwxcrAi39@DEkp6
zMbm?H~IyqrrK{ZV$R`iIP-RUPf
zZU1IGS#ysKMaHV7yJeTGdSaTxNixehj)Ck<6^u9(&S4#oA=7!(m(%bRoL`BYt0=Fq
z4g-PD9yZRNl=vyrd1c1`K*4-{I2e{OBg@kx68k`w3E@(Ne}$Qm_p}N2yspbXDbvn^|h8(e-JLt6RXg
zxwiO7L-Uz)8?cXU3M{83=hsZ$Xw@Zvr0mbAm@Mh>v0klFEqxk#3vv
zS*J^2S(!}gPPe-B>9UgE@#*+x^9yHVhC0xWdNn@*5ur7U34w9Yqm|e8V(sH|L;^6-
zu2MwHjPqb=0=j6XFo7aK+A$I1&43d79(CvGGOJkC=K;|ZGG0q#0pZ`--6Pv+6=R@C
zPzh)B=o`}Fyvy)CKP0|BhFJ3IDi?Spe@+!!B%bo`2%!N
zf_NKWa|~s24?f=`x=Fen*B6trv|)4JHFJX+MXry9SfPur&#zW#L8hc|UPYR6H<}FO
zqyssB(=f+rS+2B`jj8b6j@s*IE>6DA1nW{8TcW6p@kuqNao%^R!s<$ON}hLa5XYC|
zZ84)nJXCuMHP{#L|6s4uxRSdomy>wn{zfMwsKs&k7V=H~Rw8Mg1il@lySf
zCyw{+4%IaKSuI*_(V88qI$nY**mjkRV|Aa{ecKU)X
zzZJ^~t3`hvgRor&xqH<#DL_pJLv!p`SSj!mAZN4;Ws#vGTQ17jZQ9vSB?SE^0k6e+
zEbvYUEYM}aGj>{|x?FKQdUlK|a@1}G(m#&`hmeNMHo5kP;nKL-G`Np&C-Ad(jEZAD
zeY$J{@-sD%HBM3^N~k`|;}a%3x=Z7G=FU0PbfGO35d_v?=huLjfGzz#bJB-M5zh!x
znU+e4%7@=F@Jsq=-rGM7kG!k?J|jKj&2=dmc*M|c
z!jqH|9@yP|cazQ&iwZAfHJ}bnVY4qspg(eEUy`EWHCF3sRuyASx|e;8?Vv8j{**zY
zOsLJm8l=i(x#Td=_=bjoSMiv^Ww2JMq1@#}tY+`2SGtIZi*g4_1kpKre&TbqBc})0xBy3<`@NLdj&e-x
zVW8okoau;KMa5&TTC
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sound/waveform/index.ts b/spx-gui/src/components/editor/sound/waveform/index.ts
new file mode 100644
index 000000000..9b4a9ca1f
--- /dev/null
+++ b/spx-gui/src/components/editor/sound/waveform/index.ts
@@ -0,0 +1,2 @@
+export { default as WaveformPlayer } from './WaveformPlayer.vue'
+export { default as WaveformRecorder } from './WaveformRecorder.vue'
diff --git a/spx-gui/src/components/editor/sound/waveform/sum-processor.js b/spx-gui/src/components/editor/sound/waveform/sum-processor.js
new file mode 100644
index 000000000..b45142733
--- /dev/null
+++ b/spx-gui/src/components/editor/sound/waveform/sum-processor.js
@@ -0,0 +1,29 @@
+// This file is similar to a worker. It is expected to be imported
+// with `?url` where it need to be used.
+
+// As we import it with `?url`, it is not processed by TypeScript
+// or Rollup. It is directly loaded by the browser.
+
+class SumProcessor extends AudioWorkletProcessor {
+ process(inputs, outputs) {
+ const input = inputs[0]
+ const output = outputs[0]
+ const inputChannel = input[0]
+ const outputChannel = output[0]
+ if (!inputChannel || !outputChannel) {
+ return false
+ }
+
+ let sum = 0
+ for (let i = 0; i < inputChannel.length; i++) {
+ outputChannel[i] = inputChannel[i]
+ sum += Math.abs(inputChannel[i])
+ }
+ this.port.postMessage({
+ sum,
+ length: inputChannel.length
+ })
+ return true
+ }
+}
+registerProcessor('sum-processor', SumProcessor)
diff --git a/spx-gui/src/components/editor/sound/wavesurfer.ts b/spx-gui/src/components/editor/sound/wavesurfer.ts
deleted file mode 100644
index e7744bd31..000000000
--- a/spx-gui/src/components/editor/sound/wavesurfer.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-/**
- * @desc wave-surfer-related helpers for Go+ Builder Sound
- */
-
-import { ref, watch } from 'vue'
-import WaveSurfer from 'wavesurfer.js'
-import { useUIVariables } from '@/components/ui'
-import { getAudioContext } from '@/utils/audio'
-
-export function useWavesurfer(
- container: () => HTMLElement | undefined,
- gain: () => number,
- recording: boolean
-) {
- const uiVariables = useUIVariables()
-
- const wavesurfer = ref
+
+
+ {{ costume.name }}
+
+
+ {{ name }}
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
new file mode 100644
index 000000000..a67abf7d1
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
@@ -0,0 +1,34 @@
+
+ -
+
+
+ {{ sound.name }}
+-
+
{{ $t({ en: 'Default', zh: '默认' }) }}
+{{ $t({ en: 'Step', zh: '行走' }) }}
+{{ $t({ en: 'Die', zh: '死亡' }) }}
+{{ title }}
+
+
+
+
- ![Volume down]()
+ ![Volume up]()
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/AnimationEditor.vue b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
new file mode 100644
index 000000000..cff44b9bd
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
@@ -0,0 +1,91 @@
+
+
+
+ {{
+ $t({
+ en: "Preserve (the costumes will be moved to the sprite's costume list)",
+ zh: '保留（造型将被移动到精灵的造型列表中）'
+ })
+ }}
+
+
+
+ {{
+ $t({
+ en: `Animation ${animation.name} will be removed. Do you want to preserve the costumes?`,
+ zh: `动画 ${animation.name} 将被移除。是否保留其中的造型？`
+ })
+ }}
+
+
+
+ {{ $t({ en: 'Cancel', zh: '取消' }) }}
+
+
+ {{ $t({ en: 'Confirm', zh: '确认' }) }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/spx-gui/src/components/editor/sprite/costume-bg.svg b/spx-gui/src/components/editor/sprite/costume-bg.svg
deleted file mode 100644
index fede36619..000000000
--- a/spx-gui/src/components/editor/sprite/costume-bg.svg
+++ /dev/null
@@ -1,88 +0,0 @@
-
diff --git a/spx-gui/src/components/ui/icons/UIIcon.vue b/spx-gui/src/components/ui/icons/UIIcon.vue
index 09bd23fb3..cebdec4f9 100644
--- a/spx-gui/src/components/ui/icons/UIIcon.vue
+++ b/spx-gui/src/components/ui/icons/UIIcon.vue
@@ -32,6 +32,8 @@ import clock from './clock.svg?raw'
import timer from './timer.svg?raw'
import status from './status.svg?raw'
import sound from './sound.svg?raw'
+import volumeUp from './volume-up.svg?raw'
+import volumeOff from './volume-off.svg?raw'
const typeIconMap = {
file,
@@ -60,7 +62,9 @@ const typeIconMap = {
clock,
timer,
status,
- sound
+ sound,
+ volumeUp,
+ volumeOff
}
export type Type = keyof typeof typeIconMap
diff --git a/spx-gui/src/components/editor/sound/icons/volume-down.svg b/spx-gui/src/components/ui/icons/volume-off.svg
similarity index 91%
rename from spx-gui/src/components/editor/sound/icons/volume-down.svg
rename to spx-gui/src/components/ui/icons/volume-off.svg
index d48b7768a..788b7010f 100644
--- a/spx-gui/src/components/editor/sound/icons/volume-down.svg
+++ b/spx-gui/src/components/ui/icons/volume-off.svg
@@ -1,4 +1,4 @@
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/sound/icons/volume-up.svg b/spx-gui/src/components/ui/icons/volume-up.svg
similarity index 98%
rename from spx-gui/src/components/editor/sound/icons/volume-up.svg
rename to spx-gui/src/components/ui/icons/volume-up.svg
index 703dc91a8..d8763ac33 100644
--- a/spx-gui/src/components/editor/sound/icons/volume-up.svg
+++ b/spx-gui/src/components/ui/icons/volume-up.svg
@@ -1,4 +1,4 @@
\ No newline at end of file
diff --git a/spx-gui/src/models/animation.ts b/spx-gui/src/models/animation.ts
index 958f136e0..07174ba1d 100644
--- a/spx-gui/src/models/animation.ts
+++ b/spx-gui/src/models/animation.ts
@@ -76,8 +76,8 @@ export class Animation {
for (const costume of costumes) {
let costumeName = this.stripCostumeNamePrefix(costume.name)
costumeName = ensureValidCostumeName(costumeName, this)
- costume.setName(costumeName)
costume.setParent(this)
+ costume.setName(costumeName)
}
this.costumes = costumes
if (this.duration === 0) {
@@ -111,7 +111,7 @@ export class Animation {
constructor(name: string, inits?: AnimationInits) {
this.name = name
this.costumes = []
- this.duration = inits?.duration ?? 0
+ this.duration = inits?.duration ?? 5
this.sound = inits?.onStart?.play ?? null
for (const field of ['fps', 'isLoop', 'onPlay'] as const) {
@@ -126,9 +126,6 @@ export class Animation {
* Note that the "default" means default behavior for builder, not the default behavior of spx
*/
static create(nameBase: string, sprite: Sprite, costumes: Costume[], inits?: AnimationInits) {
- for (const costume of costumes) {
- sprite.removeCostume(costume.name)
- }
const animation = new Animation(getAnimationName(null, nameBase), inits)
animation.setCostumes(costumes)
return animation
diff --git a/spx-gui/src/models/costume.ts b/spx-gui/src/models/costume.ts
index 368c917c5..2fbbfd377 100644
--- a/spx-gui/src/models/costume.ts
+++ b/spx-gui/src/models/costume.ts
@@ -89,6 +89,15 @@ export class Costume {
return reactive(this) as this
}
+ clone() {
+ return new Costume(this.name, this.img, {
+ x: this.x,
+ y: this.y,
+ faceRight: this.faceRight,
+ bitmapResolution: this.bitmapResolution
+ })
+ }
+
/**
* Create instance with default inits
* Note that the "default" means default behavior for builder, not the default behavior of spx
From 00c76bbe327b141c351d53b9b67bf8938be60251 Mon Sep 17 00:00:00 2001
From: Hanxing Yang
+
+
+
+
+ {{ $t({ en: 'Turn on/off sound', zh: '开启/关闭声音' }) }}
+
+
+
- ![]()
-
+
+
{{ $t({ en: 'Add a sprite to start', zh: '添加一个精灵' }) }}
-
+
+ {{ $t({ en: 'Add a sprite to start', zh: '添加一个精灵' }) }}
+
{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
-
- 🌟🌟Support for hovering over the clip to show multi-frame animation
🌟🌟Support for clicking on the SURPRISE button to randomize the clip. | Supports importing materials from the librarySupport for searching materials
🌟🌟Support for your own material library | - -## STEM Functional Design - -| Module | Function | Description | -| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| Sprite Library(User) | ✅ Add a Sprite file to your stage | You can select a Sprite file from the Sprite library, or you can import it locally, you can import jpg, png, gif | -| | ✅Delete the Sprite file | ✅Delete directly
⭕️ expires 30 days after being placed in the recycle bin | -| | ✅Find a Sprite file | Support name search, fuzzy search, later can support multi-language | -| | ✅ Online preview of the Multi-Modeling Sprite file | The hover state plays a multistyled Sprite animation (gif) | -| Sprite Library(Market) | ⭕️ Publishing Sprite Files | User can publish their Sprite files to market | -| | ⭕️ download Sprite file | User can download Sprite from market to their own local area | -| | ✅Sprite Ranking | Sort by heat, posting time, etc | -| Innovative | ⭕️ Support user sprite cloud material library
⭕️ Sprite Favorites
✅Support for clicking on the SURPRISE button to randomly generate material
✅Support for hiding sprite layers | Users upload their own Sprites to add to their own cloud library for easy recall, and users uploading gifs are automatically split into multi-graphic materials
Users create their own Sprite favorites- Randomly import a clip from the clip market to the stage- User can choose whether a layer is visible or not | - -# Difficulty analysis - -## How to realize sprite preview online - -Application: Frame Animation with Multi-Shape Sprite Material - -### Scratch practices - -Switch image URL : a material corresponds to multiple shapes, each shape is saved with a svg, switch md5ext(.svg) to switch the image to realize the animation. - -#### Scratch Sprite Json Example - -```json -[ - { - "name": "Abby", - "tags": [ - "people", - "person", - "drawing" - ], - "isStage": false, - "variables": {}, - "costumes": [ - { - "assetId": "809d9b47347a6af2860e7a3a35bce057", - "name": "abby-a", - "bitmapResolution": 1, - "md5ext": "809d9b47347a6af2860e7a3a35bce057.svg", - "dataFormat": "svg", - "rotationCenterX": 31, - "rotationCenterY": 100 - }， - ... - ], - "sounds": [ - { - "assetId": "83a9787d4cb6f3b7632b4ddfebf74367", - "name": "pop", - "dataFormat": "wav", - "format": "", - "rate": 44100, - "sampleCount": 1032, - "md5ext": "83a9787d4cb6f3b7632b4ddfebf74367.wav" - } - ], - "blocks": {} - }, - ... - ] -``` - -### Other possible approaches - -#### option 1: generate gif animations - -Automatically generate animations on multiple images in the cloud and save the animations to show the animations directly instead of cutting them one by one. - -| Library/Tool | Processing Area | Processing Method | Brief Description | -| ------------ | --------------- | ------------------ | ------------------------------------------------------------ | -| GIF.js | Client-Side | JavaScript Library | Generates GIF animations directly in the browser using JavaScript. Suitable for small or client-heavy projects. | -| ImageMagick | Server-Side | Command-Line Tool | Creating complex GIFs or other image formats on the server. | -| Qiniu Dora | Server-Side | API | Currently only available for images stored in Qiniu Limitations of the original image: Supported formats are JPEG and PNG The maximum number of frames supported is 20 The maximum supported image size is 1080*1080 | - -##### GIF.js example - -```js -import GIF from 'gif.js'; - -function createGif() { - let gif = new GIF({ - workers: 2, - quality: 10 - }); - - // Let's say images are an array of images that you want to convert into GIFs - images.forEach(image => { - gif.addFrame(image, {delay: 200}); // 200ms delay per frame - }); - - gif.on('finished', function(blob) { - window.open(URL.createObjectURL(blob)); - }); - - gif.render(); -} - -``` - -##### Qiniu Dora Animate API - -https://developer.qiniu.com/dora/5448/animate - -API - -``` -animate/duration/
Supports multiple video and image formats, including GIF
Highly customizable with command line arguments | Server-side | More power in video and audio processing | -| Diffraction (physics) | ImageMagick | Powerful in image editing and conversion
Supports a wide range of image formats | Server-side | Excellent performance in image editing and conversion | - -Use FFmpeg - -```js -const { exec } = require('child_process'); - -const generateFramesFromGIF = (inputGifPath, outputFramePrefix) => { - const command = `ffmpeg -i ${inputGifPath} ${outputFramePrefix}_%04d.png`; - exec(command, (error, stdout, stderr) => { - if (error) { - console.error(`Error: ${error.message}`); - return; - } - console.log('Frames generated successfully'); - }); -}; - -generateFramesFromGIF('input.gif', 'output_frame'); - -``` - -#### Videos - -Use FFmpeg - -```js -const { exec } = require('child_process'); - -const extractFramesFromVideo = (inputVideoPath, outputFramePrefix) => { - const command = `ffmpeg -i ${inputVideoPath} -vf fps=1 ${outputFramePrefix}_%04d.png`; - exec(command, (error, stdout, stderr) => { - if (error) { - console.error(`Error: ${error.message}`); - return; - } - console.log('Frames extracted successfully'); - }); -}; - -extractFramesFromVideo('input.mp4', 'output_frame'); - -``` - - - -#### Sprite Charts - -Use PIL (Python) - -```python -from PIL import Image - -def extract_sprites(sprite_sheet_path, sprite_size, output_prefix): - sprite_sheet = Image.open(sprite_sheet_path) - width, height = sprite_sheet.size - - for i in range(0, width, sprite_size[0]): - for j in range(0, height, sprite_size[1]): - box = (i, j, i + sprite_size[0], j + sprite_size[1]) - sprite = sprite_sheet.crop(box) - sprite.save(f"{output_prefix}_{i}_{j}.png") - -extract_sprites("sprite_sheet.png", (64, 64), "sprite") - -``` - - - -### Ready-made sprite material library - -Free: https://www.aigei.com/game2d/character/dynamic_1 - -Paid: https://craftpix.net/categorys/sprites/ - - - -## How to save the library - -### Qiniu Kodo - -> Kodo is a self-developed unstructured data storage management platform that supports both central and edge storage - -https://developer.qiniu.com/kodo/1234/upload-types - -#### Methods - -| Method | Description | Advantage | Disadvantage | -| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| Form upload | Complete the upload of a file in a single HTTP POST request | Ideal for simple application scenarios and small file sizes | If the file size is large (larger than 1GB) or the network environment is poor, the HTTP connection may time out and the upload may fail. | -| Chunked Upload | A Chunked Upload divides a file into multiple small chunks, each of which is uploaded separately in a separate HTTP request. | It is suitable for large file transfers, and uses sharding to avoid connection timeouts caused by the large amount of single HTTP data.Resumable upload is supported. | require multiple HTTP requests to complete the upload process, which will incur additional costsIncreased code complexity | - -#### Form Upload Example - -```html - -``` - - -## Recommended Solutions - -- **How to realize sprite preview online:** Generate gif animations by Qiniu Dora animate API. -- **Official sprite material library construction:** Generate our official stock footage library from Gif and Video by FFmpeg, and from Sprite Chart by PIL(Python). The same library is used to reduce the development cost. Because it is an official material library production without offline problem, and we use server-side processing to reduce the overhead of the client. -- **How to save the library:** Use form-upload method to store library in Qiniu's kodo. \ No newline at end of file diff --git a/docs/load-save.md b/docs/load-save.md deleted file mode 100644 index 55e3d6519..000000000 --- a/docs/load-save.md +++ /dev/null @@ -1,96 +0,0 @@ -### Background - -#### Project Background - -In current software development practices, project management and file version control are core components. Projects involve a variety of file types, including code, images, audio, etc., requiring effective management of these files to support the development and maintenance of the project. - -#### Requirement Background - -Users need a convenient and efficient way to create, edit, save, and manage project files. Especially during file editing, the ability to perform incremental updates rather than just full updates is needed to improve efficiency and save resources. Additionally, the uniqueness and non-redundancy of project files need to be ensured. - -### Solution Overview - -**Project files are no longer stored in object storage on a project-by-project basis, but rather on a file-by-file basis**. - -#### Roles and Their Responsibilities - -- **Frontend Role**: Responsible for the design and implementation of the user interface, including the creation, editing, and display of project files. The frontend also needs to handle communication with the backend and interact directly with the object storage service to upload and delete files. -- **Backend Role**: Responsible for handling requests from the frontend, including providing complete project information and updating project information. Project information mainly includes the project's file structure, version number, `id`, `uid`, update time, etc. The backend does not directly deal with object storage. -- **Object Storage Service**: Provides storage capabilities for project files. Each file is accessed through a unique URL generated by a hash algorithm, ensuring the file's uniqueness and non-redundancy. - -#### How It Works - -1. **Project Loading**: The frontend makes an HTTP request to the backend, which retrieves the complete project information from the database and returns it to the frontend. The frontend parses and displays the project content. - - An example of the file structure is as follows (using MySQL database, which cannot store arrays, so JSON is serialized into a string for easy storage in the database): - - ```json - { - "index.json": "https://xxx.com/d2a6802666d0d9248393d0b02abc93ae.json", - "assets/demo.png":"https://xxx.com/f535a73a3dfe15ca7c623512f09d5ed4.png" - } - ``` - - The key corresponds to the file's relative path in the project, and the value corresponds to the file's online address (using object storage). The backend needs to deserialize the project file structure for the frontend, thus loading the entire project. - - After loading the entire project, the browser might have a data structure like this: - - ```json - const projectFiles = { - "index.json": { - onlineUrl: "https://xxx.com/123.json", - content: '...' - }, - // ... - } - - ``` - - The key corresponds to the file's relative path, and the value includes the online address, file content, etc. - - - -2. **Project Editing and Saving**: After the user edits a project file, the frontend interacts directly with the object storage service for file upload and deletion. After editing, the frontend sends the updated project file structure to the backend, which updates the database. - - ### Core Logic Detail Explanation - - #### Loading Project Files - - - **Frontend Request**: Carries the project ID to initiate a project loading request to the backend. - - **Backend Processing**: Queries the project file structure in the database based on the project ID, and returns the serialized JSON string to the frontend. - - **Frontend Parsing**: Converts the JSON string into a data structure of project files for editing and browsing by the user. - - #### Saving Edited Projects - - - **File Processing**: After editing a file, the frontend removes the file's `onlineUrl` and interacts with the object storage service to delete the old file, upload the new file, and obtain a new `url`. - - **Project File Structure Update**: The frontend collects all new `urls` of the files, forming an updated project file structure. - - **Backend Database Update**: The frontend sends the updated project file structure to the backend, which serializes it and updates the database, with the version number changing accordingly. - - ### Points to Note - - - Using a hash algorithm (e.g., MD5) to generate the file name for a file maintains the original file extension. This ensures the file's online address uniquely identifies the file, avoiding duplicate files and saving resources, as duplicate files will have the same `url`. If a file is changed, its `url` will change, providing a basis for a variant of incremental update between the client and server. - - - Users may need to download the entire project. This can be quickly accomplished directly with the object storage's packaging feature, meaning the frontend can directly interact with object storage without going through the backend. - - - Upon clicking the edit button in the UI, the frontend deletes the online address of the file, which is the `onlineUrl`. This is because once a file is edited, it is considered changed, and without a new online address, the file's old online address is removed. This approach allows for a kind of incremental update based on the presence or absence of each project file's online address in the browser. - - A possible logic for frontend project update: - - ```javascript - function saveProject() { - var fileTree = {} - for (const path of projectFiles) { - var url = projectFiles[path].onlineUrl - if (url == null) { - url = uploadFile(path, projectFiles[path].content) - } - fileTree[path] = url - } - postToServer(fileTree) - } - ``` - - - For a new project, since every file edited by the user does not have an online address, files without `urls` can be uploaded in the manner described above, and the new file structure can be sent to the backend. - - The initial version of the project is set to 1. When the user saves the project, the backend increases the version number as it updates the database. - - Throughout the process of loading and saving project files, the interaction between the frontend and backend only involves loading project file structures from the backend and updating the database by the backend, without the backend dealing with object storage. The frontend interacts directly with object storage. - diff --git a/docs/project-runner.md b/docs/project-runner.md deleted file mode 100644 index 464422642..000000000 --- a/docs/project-runner.md +++ /dev/null @@ -1,106 +0,0 @@ -# Project runner - -# Module Overview - -This module is part of the compiler implementation for an online editor. This document investigates the existing ecosystem tools of Spx and organizes the technical challenges and feasible solutions for implementing online compilation. - -# GitHub Repository -- https://github.com/goplus/spx -- https://github.com/goplus/gop -- https://github.com/goplus/ispx -- https://github.com/goplus/igop - -# Client-Side vs. Server-Side Compilation Comparison - -## Client-Side Compilation - -**Advantages:** - -1. Immediate Compilation and Execution: Users can compile and run code immediately in the same environment, enhancing user experience. -2. Reduced Server Load: Compilation occurs on the user's device, not occupying server resources. -3. Offline Capability: The application can operate offline without needing to interact with the server. -4. Real-time Feedback: Users can see the results of code changes instantly, aiding in learning and debugging. - -**Disadvantages:** - -1. Performance Limitations: Client-side devices might not perform as well as servers, especially for complex compilation tasks. -2. Security Concerns: Exposing the compiler to the client may pose security risks. -3. Compatibility and Consistency: Different devices and browsers among users may lead to variations in compilation behavior. -4. Increased Frontend Complexity: Implementing file assembly, reading, and compilation functions on the frontend is required. - -## Server-Side Compilation - -**Advantages:** - -1. Unified Compilation Environment: The server provides a consistent compilation environment, ensuring uniformity in compilation results. -2. Powerful Processing Capability: Servers typically have more computing power than clients, suitable for complex compilation tasks. -3. Enhanced Security: Compilation on the server reduces security risks on the client side. -4. Convenient File Management: Servers are better suited for file storage and management. - -**Disadvantages:** - -1. Response Time: Uploading files from the client to the server and sending back compilation results may cause delays. -2. Server Load: All compilation tasks occurring on the server can increase its load. -3. Network Dependency: Continuous network connection is required for file transfer and receiving compilation results. -4. Lack of Immediate Feedback: Users may not see the effects of their changes right away, affecting the experience. - -## Summary - -### **Supported** - -> Client-side compilation has unique advantages - -| Feature | network dependency | response speed | real time feedback | -| ----------------------- | ------------------ | -------------- | ------------------ | -| Client compilation | no | fast | yes | -| Server side compilation | yes | slow | no | - -# Front-End Storage Solutions Research - -## Existing Web Storage Technologies -| Technology | Capacity Limit | Data Persistence | Access Speed | Sync/Async | Security | Use Cases | -|------------------------|-------------------------------------------------|---------------------------------------------------|---------------------------------------------------|--------------|------------------------------------------------|---------------------------------------------| -| LocalStorage | 5MB per domain | Persistent until browser cache is cleared | Usually fast | Synchronous | Not suitable for sensitive data | Storing small amounts of non-sensitive data | -| SessionStorage | 5MB per domain | Persistent only during browser session | Usually fast | Synchronous | Not suitable for sensitive data | Storing small amounts of non-sensitive data | -| Cookies | 4KB per domain | Expirable, but can be cleared by user | Fast, but sent with every HTTP request | Synchronous | Can be set to HTTPS only to enhance security | Storing small pieces of data like user authentication | -| IndexedDB | Several hundred MB or more, depending on user's browser and disk space | Persistent storage | Fast, but can be slower due to asynchronicity | Asynchronous | Not suitable for sensitive data | Storing large amounts or structured text data | -| Cache API | Depends on user's disk space | Persistent, but can be cleared by user | Depends on data size and disk speed | Asynchronous | Not suitable for sensitive data | Caching requests and supporting offline content | -| File System Access API | Depends on user's disk space | Persistent, but can be cleared by user | Depends on data size and disk speed | Asynchronous | Provides more direct file access, but requires user permission | Applications that interact with user's local files | - -## Compare three technologies based on different perspectives -| Perspectives | IndexedDB | File System Access API | Cache API | -|-----------------------------|------------------------------------------------------------|----------------------------------------------------------------|-----------------------------------------------------| -| Basic Compatibility | Supported by all mainstream browsers, but implementation details may vary | Mainly supported by Chrome, lower or no support in Firefox, Safari, and Edge | Part of Service Workers, well supported in mainstream browsers | -| Performance and Limitations | Performance and database size limits vary by browser | Usage may be limited, especially for security and privacy reasons | Storage policies and limitations may slightly differ | -| Mobile Device Compatibility | Well supported on mobile versions of Chrome and Firefox, potential issues with Safari | Mainly supported on Chrome, other browsers offer lower or no support | Generally well-supported on mobile browsers | -| Data Synchronization | Requires custom sync logic with the server; suitable for complex data structures | Sync is more complex, often manual; interacts directly with local files | Mainly used for resource caching, not designed specifically for data sync | -| Offline Support | Excellent for offline data storage; supports large and structured data | Direct read and write to local files; very suitable for offline operations | Key component for offline access in PWAs; caches network requests and responses | -| Storage Space Management | Large storage capacity, decided by the browser; monitoring needed to avoid exceeding limits | Depends on the user's local file system; potentially very large, but management is complex | Managed by the browser's caching mechanisms; constrained by browser cache limits | -| User Prompt | Usually no user prompt required, operates silently in the background | Explicit user permission needed to access files; requires direct and ongoing user interaction | No user prompt needed for caching storage; operates silently in the background | -| User Interface | Operates in the background; does not directly affect the user interface | Requires direct user interaction, such as file selectors and other UI elements | Invisible to the user; operates silently in the background | -| Experience Design | Indirectly impacts user experience; very useful for complex data processing within apps | Significantly affects user experience; user permission prompts and file management are core aspects | Improves user experience by speeding up load times and providing offline content access | -## Summary - -### **Supported** - -The following web API was chosen to support a generic browser FileSystem. - -| Feature | Firefox | Chrome | Edge | Safari | IE | -| --------------------------------------------------------------------------- | ------- | ------ | ---- | ------ | -- | -| [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) | yes | yes | yes | yes | no | - -### **Rejected** - -The following APIs were all considered in choosing a backend to support - -| Rejected APIs | Reason | -| ---------------------------------------------------------------------------------------- | ---------------------- | -| [LocalStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) | Limited storage | -| [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | Limited storage | -| [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) | Limited storage | -| [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) | Requires a request URL | -| [File System Access API](https://web.dev/file-system-access/) | Chromium only | - -# participants - -[a-linye](https://github.com/a-linye), [motongxue](https://github.com/motongxue). diff --git a/docs/screenshot.jpeg b/docs/screenshot.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..0c0fb51e95177d452fa0d5b51012385a03362f9a GIT binary patch literal 554868 zcmeFYbyQrz)+gEoO$Z*mkswL%;0_^JfB?a@Ap~upan~RLf;$NsXrOU#+%-Uu#%bK$ z-5>ex+;{KHTHm*3-pu^>_E~+-?^NxoT~%k7^xjnuQxA&(e0do;82}0j0D$s%0Unl7 zrsO0g4L_+W%gB9{{zt@bz$2l(1ppv6P7bQF?`gGlbZIdc|B>QvoRP7k-QVYbLXY{L zPyEdt02pQaPk8>T;HM_0j>eA+hmSu7hezR$g?;geUzq;`zxj*5`~!>p#jZ|vPLDjF z{$dApRmn$e@`&G<{~P}DZ`jz*;V*yqBaaBg+WD`nzx21n&rNMK)E=K$k3S&55ugf? z1-$=T|Ht=7vdsbj1kL~e)aZYOefbFh)O-T~$dLaEWB3IC-~|Ez)kFUZ`&XOT895mJ zM|NnB_a|m%0KhQ}0Km}!0EmVGfM