Make visualizer draggable

src/app/visualization/VisualizerView.ts

@@ -4,7 +4,9 @@ import { BiomeNoiseVisualizer } from "./BiomeNoiseVisualizer";
 export interface Visualizer {
   path(): Path
   active(model: DataModel): boolean
+  dirty(model: DataModel): boolean
   draw(model: DataModel, img: ImageData): void
+  onDrag?(from: number[], to: number[]): void
 }
 
 export class VisualizerView extends AbstractView {
@@ -15,6 +17,7 @@ export class VisualizerView extends AbstractView {
   sourceView: HTMLElement
   gutter: HTMLElement
   lastHeight?: string
+  dragStart?: number[]
 
   constructor(model: DataModel, canvas: HTMLCanvasElement) {
     super(model)
@@ -23,13 +26,30 @@ export class VisualizerView extends AbstractView {
     this.canvas = canvas
     this.gutter = canvas.parentElement!.querySelector('.gutter') as HTMLElement
     this.sourceView = canvas.parentElement!.getElementsByTagName('textarea')[0] as HTMLElement
+
+    canvas.addEventListener('mousedown', evt => {
+      this.dragStart = [evt.offsetX, evt.offsetY]
+    })
+    canvas.addEventListener('mousemove', evt => {
+      if (this.dragStart === undefined) return
+      if (this.visualizer?.onDrag) {
+        this.visualizer.onDrag(this.dragStart, [evt.offsetX, evt.offsetY])
+      }
+      this.dragStart = [evt.offsetX, evt.offsetY]
+      this.invalidated()
+    })
+    canvas.addEventListener('mouseup', evt => {
+      this.dragStart = undefined
+    })
   }
 
   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)
+      if (this.visualizer.dirty(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) {