107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import { ref } from 'vue'
|
|
import config from '@/application/config'
|
|
import type { Tile } from '@/application/types'
|
|
import type { TileAnalysisResult, TileWorkerMessage } from '@/types/tileTypes'
|
|
|
|
// Constants for image processing
|
|
const DOWNSCALE_WIDTH = 32
|
|
const DOWNSCALE_HEIGHT = 16
|
|
const COLOR_SIMILARITY_THRESHOLD = 30
|
|
const EDGE_SIMILARITY_THRESHOLD = 20
|
|
const BATCH_SIZE = 4
|
|
|
|
export function useTileProcessingComposable() {
|
|
const tileAnalysisCache = ref<Map<string, { color: { r: number; g: number; b: number }; edge: number; namePrefix: string }>>(new Map())
|
|
const processingQueue = ref<Tile[]>([])
|
|
let isProcessing = false
|
|
const worker = new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' })
|
|
|
|
worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
|
|
const { tileId, color, edge, namePrefix } = e.data
|
|
tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
|
|
isProcessing = false
|
|
processBatch()
|
|
}
|
|
|
|
async function processTileAsync(tile: Tile): Promise<void> {
|
|
if (tileAnalysisCache.value.has(tile.id)) return
|
|
|
|
return new Promise((resolve) => {
|
|
const img = new Image()
|
|
img.crossOrigin = 'Anonymous'
|
|
img.onload = () => {
|
|
const canvas = document.createElement('canvas')
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) {
|
|
resolve()
|
|
return
|
|
}
|
|
|
|
canvas.width = DOWNSCALE_WIDTH
|
|
canvas.height = DOWNSCALE_HEIGHT
|
|
ctx.drawImage(img, 0, 0, DOWNSCALE_WIDTH, DOWNSCALE_HEIGHT)
|
|
|
|
const imageData = ctx.getImageData(0, 0, DOWNSCALE_WIDTH, DOWNSCALE_HEIGHT)
|
|
const message: TileWorkerMessage = {
|
|
imageData,
|
|
tileId: tile.id,
|
|
tileName: tile.name
|
|
}
|
|
worker.postMessage(message)
|
|
resolve()
|
|
}
|
|
img.onerror = () => resolve()
|
|
img.src = `${config.server_endpoint}/textures/tiles/${tile.id}.png`
|
|
})
|
|
}
|
|
|
|
function processBatch() {
|
|
if (isProcessing || processingQueue.value.length === 0) return
|
|
isProcessing = true
|
|
|
|
const batch = processingQueue.value.splice(0, BATCH_SIZE)
|
|
Promise.all(batch.map(tile => processTileAsync(tile)))
|
|
.then(() => {
|
|
isProcessing = false
|
|
if (processingQueue.value.length > 0) {
|
|
setTimeout(processBatch, 0)
|
|
}
|
|
})
|
|
}
|
|
|
|
function processTile(tile: Tile) {
|
|
if (!processingQueue.value.includes(tile)) {
|
|
processingQueue.value.push(tile)
|
|
processBatch()
|
|
}
|
|
}
|
|
|
|
function areTilesRelated(tile1: Tile, tile2: Tile): boolean {
|
|
const data1 = tileAnalysisCache.value.get(tile1.id)
|
|
const data2 = tileAnalysisCache.value.get(tile2.id)
|
|
|
|
if (!data1 || !data2) return false
|
|
|
|
const colorDifference = Math.sqrt(
|
|
Math.pow(data1.color.r - data2.color.r, 2) +
|
|
Math.pow(data1.color.g - data2.color.g, 2) +
|
|
Math.pow(data1.color.b - data2.color.b, 2)
|
|
)
|
|
|
|
return (
|
|
colorDifference <= COLOR_SIMILARITY_THRESHOLD &&
|
|
Math.abs(data1.edge - data2.edge) <= EDGE_SIMILARITY_THRESHOLD &&
|
|
data1.namePrefix === data2.namePrefix
|
|
)
|
|
}
|
|
|
|
function cleanup() {
|
|
worker.terminate()
|
|
}
|
|
|
|
return {
|
|
processTile,
|
|
areTilesRelated,
|
|
cleanup
|
|
}
|
|
} |