Make biome noise colors customizable and fix warp problem

src/app/app.ts

@@ -7,12 +7,14 @@ import {
   ModelPath,
   SourceView,
   TreeView,
+  Path,
 } from '@mcschema/core'
 import { getCollections, getSchemas } from '@mcschema/java-1.16'
 import { VisualizerView } from './visualization/VisualizerView'
 import { RegistryFetcher } from './RegistryFetcher'
 import { ErrorsView } from './ErrorsView'
 import config from '../config.json'
+import { BiomeNoiseVisualizer } from './visualization/BiomeNoiseVisualizer'
 
 const LOCAL_STORAGE_THEME = 'theme'
 const LOCAL_STORAGE_LANGUAGE = 'language'
@@ -62,7 +64,7 @@ const treeViewObserver = (el: HTMLElement) => {
 }
 
 const treeViewNodeInjector = (path: ModelPath, view: TreeView) => {
-  return VisualizerView.visualizers
+  let res = VisualizerView.visualizers
     .filter(v => v.active(path))
     .map(v => {
       const id = view.registerClick(() => {
@@ -71,6 +73,20 @@ const treeViewNodeInjector = (path: ModelPath, view: TreeView) => {
       return `<button data-id=${id}>${locale('visualize')} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg></button>`
     })
     .join('')
+  if (views.visualizer.active && views.visualizer.visualizer?.getName() === 'biome-noise') {
+    if (path.startsWith(new Path(['generator', 'biome_source', 'biomes'])) && path.getArray().length === 4) {
+      const biomeVisualizer = views.visualizer.visualizer as BiomeNoiseVisualizer
+      const biome = path.push('biome').get()
+      const id = view.registerChange(el => {
+        biomeVisualizer.setBiomeColor(biome, (el as HTMLInputElement).value)
+        views.visualizer.visualizer!.state = {}
+        views.visualizer.invalidated()
+      })
+      console.log("hello?")
+      res += `<input type="color" value="${biomeVisualizer.getBiomeHex(biome)}" data-id=${id}></input>`
+    }
+  }
+  return res
 }
 
 const fetchLocale = async (id: string) => {

src/app/visualization/BiomeNoiseVisualizer.ts

@@ -8,12 +8,17 @@ export class BiomeNoiseVisualizer extends Visualizer {
   private noise: SimplexNoise[]
   private offsetX: number = 0
   private offsetY: number = 0
+  private biomeColors: {[id: string]: number[]} = {}
 
   constructor() {
     super()
     this.noise = BiomeNoiseVisualizer.noiseMaps.map(e => new SimplexNoise())
   }
 
+  getName() {
+    return 'biome-noise'
+  }
+
   active(path: ModelPath) {
     return path.endsWith(new Path(['generator', 'biome_source']))
       && path.push('type').get() === 'minecraft:multi_noise'
@@ -25,7 +30,7 @@ export class BiomeNoiseVisualizer extends Visualizer {
       for (let y = 0; y < 100; y += 1) {
         const i = (y * (img.width * 4)) + (x * 4)
         const b = this.closestBiome(x, y)
-        const color = this.colorFromBiome(b)
+        const color = this.getBiomeColor(b)
         data[i] = color[0]
         data[i + 1] = color[1]
         data[i + 2] = color[2]
@@ -35,8 +40,8 @@ export class BiomeNoiseVisualizer extends Visualizer {
   }
 
   onDrag(from: number[], to: number[]) {
-    this.offsetX += (to[0] - from[0]) / 128
-    this.offsetY += (to[1] - from[1]) / 128
+    this.offsetX += to[0] - from[0]
+    this.offsetY += to[1] - from[1]
   }
 
   private closestBiome(x: number, y: number): string {
@@ -66,7 +71,7 @@ export class BiomeNoiseVisualizer extends Visualizer {
       let n = 0
       let scale = 2**config.firstOctave
       for (let i = 0; i < config.amplitudes.length; i++) {
-        n += this.noise[index].noise2D(x*scale - this.offsetX, y*scale + i - this.offsetY)
+        n += this.noise[index].noise2D((x - this.offsetX)*scale, (y- this.offsetY)*scale + i)
           * config.amplitudes[i] * 128 / scale
         scale *= 2
       }
@@ -74,12 +79,28 @@ export class BiomeNoiseVisualizer extends Visualizer {
     })
   }
 
+  getBiomeColor(biome: string): number[] {
+    const color = this.biomeColors[biome]
+    if (color === undefined) {
+      return this.colorFromBiome(biome)
+    }
+    return color
+  }
+
+  setBiomeColor(biome: string, value: string) {
+    this.biomeColors[biome] = [parseInt(value.slice(1, 3), 16), parseInt(value.slice(3, 5), 16), parseInt(value.slice(5, 7), 16)]
+  }
+
+  getBiomeHex(biome: string): string {
+    return '#' + this.getBiomeColor(biome).map(e => e.toString(16).padStart(2, '0')).join('')
+  }
+
   private colorFromBiome(biome: string): number[] {
     const h = Math.abs(this.hash(biome))
     return [h % 256, (h >> 8) % 256, (h >> 16) % 256]
   }
 
   private hash(s: string) {
-    return s.split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)
+    return (s ?? '').split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)
   }
 }

src/app/visualization/NoiseSettingsVisualizer.ts

@@ -14,6 +14,10 @@ export class NoiseSettingsVisualizer extends Visualizer {
     this.offsetX = 0
   }
 
+  getName() {
+    return 'noise-settings'
+  }
+
   active(path: ModelPath) {
     return path.endsWith(new Path(['noise']))
   }

src/app/visualization/Visualizer.ts

@@ -7,6 +7,7 @@ export abstract class Visualizer {
     return JSON.stringify(this.state) !== JSON.stringify(path.get())
   }
 
+  abstract getName(): string
   abstract active(path: ModelPath): boolean
   abstract draw(model: DataModel, img: ImageData): void