Add visualizer view

src/app/visualization/BiomeNoiseVisualizer.ts

@@ -0,0 +1,36 @@
+import SimplexNoise from 'simplex-noise'
+import { DataModel, Path } from "@mcschema/core";
+import { Visualizer } from './VisualizerView';
+
+export class BiomeNoiseVisualizer implements Visualizer {
+  private noise: SimplexNoise
+
+  constructor() {
+    this.noise = new SimplexNoise()
+  }
+
+  path() {
+    return new Path(['generator', 'biome_source'])
+  }
+
+  active(model: DataModel) {
+    const biomeSource = new Path(['generator', 'biome_source'])
+    return model.get(biomeSource) !== undefined
+      && model.get(biomeSource.push('type')) === 'minecraft:multi_noise'
+  }
+
+  draw(model: DataModel, img: ImageData) {
+    const biomeSource = model.get(new Path(['generator', 'biome_source']))
+    const data = img.data
+    for (let x = 0; x < 200; x += 1) {
+      for (let y = 0; y < 100; y += 1) {
+        const i = (y * (img.width * 4)) + (x * 4)
+        const b = (this.noise.noise2D(x/50, y/50) > 0) ? 0 : 255
+        data[i] = b
+        data[i + 1] = b
+        data[i + 2] = b
+        data[i + 3] = 255
+      }
+    }
+  }
+}

src/app/visualization/VisualizerView.ts

@@ -0,0 +1,57 @@
+import { AbstractView, DataModel, Path } from "@mcschema/core";
+import { BiomeNoiseVisualizer } from "./BiomeNoiseVisualizer";
+
+export interface Visualizer {
+  path(): Path
+  active(model: DataModel): boolean
+  draw(model: DataModel, img: ImageData): void
+}
+
+export class VisualizerView extends AbstractView {
+  ctx: CanvasRenderingContext2D
+  visualizer?: Visualizer
+  active: boolean
+  canvas: HTMLElement
+  sourceView: HTMLElement
+  gutter: HTMLElement
+  lastHeight?: string
+
+  constructor(model: DataModel, canvas: HTMLCanvasElement) {
+    super(model)
+    this.ctx = canvas.getContext('2d')!
+    this.active = false
+    this.canvas = canvas
+    this.gutter = canvas.parentElement!.querySelector('.gutter') as HTMLElement
+    this.sourceView = canvas.parentElement!.getElementsByTagName('textarea')[0] as HTMLElement
+  }
+
+  invalidated() {
+    if (this.active && this.visualizer && this.visualizer.active(this.model)) {
+      const img = this.ctx.createImageData(200, 100)
+      this.visualizer.draw(this.model, img)
+      this.ctx.putImageData(img, 0, 0)
+      this.canvas.style.display = 'block'
+      this.gutter.style.display = 'block'
+      if (this.lastHeight) {
+        this.sourceView.style.height = this.lastHeight
+        this.lastHeight = undefined
+      }
+    } else {
+      this.canvas.style.display = 'none'
+      this.gutter.style.display = 'none'
+      this.lastHeight = this.sourceView.style.height
+      this.sourceView.style.height = '100%'
+      this.ctx.clearRect(0, 0, 200, 100)
+    }
+  }
+
+  set(visualizer: Visualizer) {
+    this.active = true
+    this.visualizer = visualizer
+    this.invalidated()
+  }
+
+  static visualizers: {[key: string]: Visualizer} = {
+    'biome-noise': new BiomeNoiseVisualizer()
+  }
+}