Merge pull request #342 from baaahs/editor-improvements

merge-when-green[bot] · web-flow · commit 3b22d5538b1f · 2021-01-09T21:01:46.000Z
Add simple preview for moving head shaders
diff --git a/src/commonMain/kotlin/baaahs/gl/preview/ShaderPreview.kt b/src/commonMain/kotlin/baaahs/gl/preview/ShaderPreview.kt
@@ -1,6 +1,7 @@
-package baaahs.gl.render
+package baaahs.gl.preview
 
 import baaahs.gl.glsl.GlslProgram
+import baaahs.gl.render.RenderEngine
 
 interface ShaderPreview {
     val renderEngine: RenderEngine
diff --git a/src/commonMain/kotlin/baaahs/gl/preview/ShaderPreviewBootstrapper.kt b/src/commonMain/kotlin/baaahs/gl/preview/ShaderPreviewBootstrapper.kt
@@ -0,0 +1,9 @@
+package baaahs.gl.preview
+
+expect interface ShaderPreviewBootstrapper
+
+expect object MovingHeadPreviewBootstrapper : ShaderPreviewBootstrapper
+
+expect object ProjectionPreviewBootstrapper : ShaderPreviewBootstrapper
+
+expect object QuadPreviewBootstrapper : ShaderPreviewBootstrapper
diff --git a/src/commonMain/kotlin/baaahs/gl/shader/type/DistortionShader.kt b/src/commonMain/kotlin/baaahs/gl/shader/type/DistortionShader.kt
@@ -4,6 +4,8 @@ import baaahs.app.ui.CommonIcons
 import baaahs.gl.glsl.ShaderAnalysis
 import baaahs.gl.patch.ContentType
 import baaahs.gl.preview.PreviewShaders
+import baaahs.gl.preview.QuadPreviewBootstrapper
+import baaahs.gl.preview.ShaderPreviewBootstrapper
 import baaahs.gl.shader.OpenShader
 import baaahs.ui.Icon
 
@@ -20,6 +22,9 @@ object DistortionShader : ShaderType {
         }
     """.trimIndent()
 
+    override val shaderPreviewBootstrapper: ShaderPreviewBootstrapper
+        get() = QuadPreviewBootstrapper
+
     override fun matches(shaderAnalysis: ShaderAnalysis): ShaderType.MatchLevel {
         return if (shaderAnalysis.signatureMatches(ContentType.UvCoordinate, ContentType.UvCoordinate))
             ShaderType.MatchLevel.MatchAndFilter
diff --git a/src/commonMain/kotlin/baaahs/gl/shader/type/FilterShader.kt b/src/commonMain/kotlin/baaahs/gl/shader/type/FilterShader.kt
@@ -4,6 +4,8 @@ import baaahs.app.ui.CommonIcons
 import baaahs.gl.glsl.ShaderAnalysis
 import baaahs.gl.patch.ContentType
 import baaahs.gl.preview.PreviewShaders
+import baaahs.gl.preview.QuadPreviewBootstrapper
+import baaahs.gl.preview.ShaderPreviewBootstrapper
 import baaahs.gl.shader.OpenShader
 import baaahs.ui.Icon
 
@@ -20,6 +22,9 @@ object FilterShader : ShaderType {
         }
     """.trimIndent()
 
+    override val shaderPreviewBootstrapper: ShaderPreviewBootstrapper
+        get() = QuadPreviewBootstrapper
+
     override fun matches(shaderAnalysis: ShaderAnalysis): ShaderType.MatchLevel {
         return if (shaderAnalysis.signatureMatches(ContentType.Color, ContentType.Color))
             ShaderType.MatchLevel.MatchAndFilter
diff --git a/src/commonMain/kotlin/baaahs/gl/shader/type/MoverShader.kt b/src/commonMain/kotlin/baaahs/gl/shader/type/MoverShader.kt
@@ -3,7 +3,9 @@ package baaahs.gl.shader.type
 import baaahs.app.ui.CommonIcons
 import baaahs.gl.glsl.ShaderAnalysis
 import baaahs.gl.patch.ContentType
+import baaahs.gl.preview.MovingHeadPreviewBootstrapper
 import baaahs.gl.preview.PreviewShaders
+import baaahs.gl.preview.ShaderPreviewBootstrapper
 import baaahs.gl.shader.OpenShader
 import baaahs.plugin.core.MovingHeadParams
 import baaahs.ui.Icon
@@ -30,6 +32,9 @@ object MoverShader : ShaderType {
         }
     """.trimIndent()
 
+    override val shaderPreviewBootstrapper: ShaderPreviewBootstrapper
+        get() = MovingHeadPreviewBootstrapper
+
     override fun matches(shaderAnalysis: ShaderAnalysis): ShaderType.MatchLevel {
         return if (shaderAnalysis.outputIs(MovingHeadParams.contentType))
             ShaderType.MatchLevel.Match
diff --git a/src/commonMain/kotlin/baaahs/gl/shader/type/PaintShader.kt b/src/commonMain/kotlin/baaahs/gl/shader/type/PaintShader.kt
@@ -4,6 +4,8 @@ import baaahs.app.ui.CommonIcons
 import baaahs.gl.glsl.ShaderAnalysis
 import baaahs.gl.patch.ContentType
 import baaahs.gl.preview.PreviewShaders
+import baaahs.gl.preview.QuadPreviewBootstrapper
+import baaahs.gl.preview.ShaderPreviewBootstrapper
 import baaahs.gl.shader.OpenShader
 import baaahs.ui.Icon
 
@@ -20,6 +22,9 @@ object PaintShader : ShaderType {
         }
     """.trimIndent()
 
+    override val shaderPreviewBootstrapper: ShaderPreviewBootstrapper
+        get() = QuadPreviewBootstrapper
+
     override fun matches(shaderAnalysis: ShaderAnalysis): ShaderType.MatchLevel {
         return if (shaderAnalysis.outputIs(ContentType.Color))
             ShaderType.MatchLevel.Match
diff --git a/src/commonMain/kotlin/baaahs/gl/shader/type/ProjectionShader.kt b/src/commonMain/kotlin/baaahs/gl/shader/type/ProjectionShader.kt
@@ -4,6 +4,8 @@ import baaahs.app.ui.CommonIcons
 import baaahs.gl.glsl.ShaderAnalysis
 import baaahs.gl.patch.ContentType
 import baaahs.gl.preview.PreviewShaders
+import baaahs.gl.preview.ProjectionPreviewBootstrapper
+import baaahs.gl.preview.ShaderPreviewBootstrapper
 import baaahs.gl.shader.OpenShader
 import baaahs.ui.Icon
 
@@ -30,6 +32,9 @@ object ProjectionShader : ShaderType {
 
     override val injectUvCoordinateForPreview: Boolean get() = false
 
+    override val shaderPreviewBootstrapper: ShaderPreviewBootstrapper
+        get() = ProjectionPreviewBootstrapper
+
     override fun matches(shaderAnalysis: ShaderAnalysis): ShaderType.MatchLevel {
         return if (shaderAnalysis.signatureMatches(ContentType.XyzCoordinate, ContentType.UvCoordinate))
             ShaderType.MatchLevel.Match
diff --git a/src/commonMain/kotlin/baaahs/gl/shader/type/ShaderType.kt b/src/commonMain/kotlin/baaahs/gl/shader/type/ShaderType.kt
@@ -4,6 +4,8 @@ import baaahs.app.ui.CommonIcons
 import baaahs.gl.glsl.ShaderAnalysis
 import baaahs.gl.patch.ContentType
 import baaahs.gl.preview.PreviewShaders
+import baaahs.gl.preview.QuadPreviewBootstrapper
+import baaahs.gl.preview.ShaderPreviewBootstrapper
 import baaahs.gl.shader.OpenShader
 import baaahs.show.mutable.MutableShader
 import baaahs.ui.Icon
@@ -13,6 +15,7 @@ interface ShaderType {
     val icon: Icon
     val template: String
     val injectUvCoordinateForPreview: Boolean get() = true
+    val shaderPreviewBootstrapper: ShaderPreviewBootstrapper
 
     fun newShaderFromTemplate(): MutableShader {
         return MutableShader("Untitled $title Shader", template)
@@ -38,6 +41,8 @@ interface ShaderType {
         override val title: String get() = "Unknown"
         override val icon: Icon get() = CommonIcons.UnknownShader
         override val template: String get() = error("n/a")
+        override val shaderPreviewBootstrapper: ShaderPreviewBootstrapper
+            get() = QuadPreviewBootstrapper // TODO: Something else, what?
 
         override fun matches(shaderAnalysis: ShaderAnalysis): MatchLevel = MatchLevel.NoMatch
 
diff --git a/src/jsMain/js/simulator/MosaicApp.jsx b/src/jsMain/js/simulator/MosaicApp.jsx
@@ -1,4 +1,3 @@
-import {hot} from 'react-hot-loader';
 import styles from './MosaicUI.scss';
 import React, {useContext, useEffect, useState} from 'react';
 import {Mosaic, MosaicWindow, MosaicZeroState} from 'react-mosaic-component';
@@ -114,4 +113,4 @@ const MosaicUI = (props) => {
   );
 };
 
-export default hot(module)(MosaicApp);
+export default MosaicApp;
diff --git a/src/jsMain/kotlin/baaahs/app/ui/ShaderPreview.kt b/src/jsMain/kotlin/baaahs/app/ui/ShaderPreview.kt
@@ -1,17 +1,13 @@
 package baaahs.app.ui
 
 import baaahs.document
-import baaahs.gl.GlBase
 import baaahs.gl.GlContext
 import baaahs.gl.Toolchain
 import baaahs.gl.openShader
 import baaahs.gl.preview.GadgetAdjuster
 import baaahs.gl.preview.PreviewShaderBuilder
 import baaahs.gl.preview.ShaderBuilder
-import baaahs.gl.render.ProjectionPreview
-import baaahs.gl.render.QuadPreview
-import baaahs.gl.render.ShaderPreview
-import baaahs.gl.shader.type.ProjectionShader
+import baaahs.gl.preview.ShaderPreview
 import baaahs.jsx.useResizeListener
 import baaahs.show.Shader
 import baaahs.ui.addObserver
@@ -29,6 +25,7 @@ import materialui.components.typography.typography
 import materialui.icon
 import materialui.icons.Icons
 import org.w3c.dom.HTMLCanvasElement
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.events.EventTarget
 import react.*
 import react.dom.*
@@ -41,39 +38,40 @@ val ShaderPreview = xComponent<ShaderPreviewProps>("ShaderPreview") { props ->
     val appContext = useContext(appContext)
     val toolchain = props.toolchain ?: appContext.toolchain
 
-    val canvas = ref<HTMLCanvasElement?> { null }
-    var gl by state<GlContext?> { null }
+    val canvasParent = ref<HTMLDivElement?> { null }
     var shaderPreview by state<ShaderPreview?> { null }
     var errorPopupAnchor by state<EventTarget?> { null }
     val preRenderHook = ref { {} }
 
     val width = props.width ?: 150.px
     val height = props.height ?: 150.px
 
-    onMount(canvas.current) {
-        val canvasEl = canvas.current ?: return@onMount
+    val canvas = memo(props.previewShaderBuilder?.openShader?.shaderType) {
+        document.createElement("canvas").apply {
+                this.setAttribute("width", width.toString())
+                this.setAttribute("height", height.toString())
+            } as HTMLCanvasElement
+    }
+    var gl by state<GlContext?> { null }
+
+    onMount(canvasParent.current, canvas) {
+        canvasParent.current?.let { parent ->
+            parent.insertBefore(canvas, parent.firstChild)
+        }
+
+        withCleanup { canvasParent.current?.removeChild(canvas) }
+    }
 
+    onChange("shader type", canvas, props.previewShaderBuilder?.openShader?.shaderType) {
         val shaderType = props.previewShaderBuilder?.openShader?.shaderType ?: run {
             // TODO: This is duplicating work that happens later in PreviewShaderBuilder, which is rotten.
             toolchain.openShader(props.shader!!).shaderType
         }
 
-        val preview = if (shaderType == ProjectionShader) {
-            val canvas2d = canvasEl
-            val canvas3d = document.createElement("canvas") as HTMLCanvasElement
-            val glslContext = GlBase.jsManager.createContext(canvas3d)
-            gl = glslContext
-
-            ProjectionPreview(canvas2d, glslContext, canvasEl.width, canvasEl.height, appContext.webClient.model) {
-                preRenderHook.current()
-            }
-        } else {
-            val glslContext = GlBase.jsManager.createContext(canvasEl)
-            gl = glslContext
-            QuadPreview(glslContext, canvasEl.width, canvasEl.height) {
-                preRenderHook.current()
-            }
-        }
+        val preview = shaderType.shaderPreviewBootstrapper.bootstrap(
+            canvas, appContext.webClient.model, preRenderHook
+        )
+        gl = preview.renderEngine.gl
 
         val intersectionObserver = IntersectionObserver { entries ->
             if (entries.any { it.isIntersecting }) {
@@ -82,7 +80,7 @@ val ShaderPreview = xComponent<ShaderPreviewProps>("ShaderPreview") { props ->
                 preview.stop()
             }
         }
-        intersectionObserver.observe(canvasEl)
+        intersectionObserver.observe(canvas)
 
         shaderPreview = preview
 
@@ -132,22 +130,20 @@ val ShaderPreview = xComponent<ShaderPreviewProps>("ShaderPreview") { props ->
         }
     }
 
-    useResizeListener(canvas) {
+    useResizeListener(canvasParent) {
         // Tell Kotlin controller the window was resized
-        shaderPreview?.resize(canvas.current!!.width, canvas.current!!.height)
+        shaderPreview?.resize(
+            canvasParent.current!!.clientWidth,
+            canvasParent.current!!.clientHeight
+        )
     }
 
     styledDiv {
+        ref = canvasParent
         css { +ShaderPreviewStyles.container }
         css.width = width
         css.height = height
 
-        canvas {
-            ref = canvas
-            attrs.width = width.toString()
-            attrs.height = height.toString()
-        }
-
         when (builder?.state ?: ShaderBuilder.State.Unbuilt) {
             ShaderBuilder.State.Unbuilt,
             ShaderBuilder.State.Analyzing,
diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUi.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUi.kt
@@ -225,7 +225,7 @@ val EditableManagerUi = xComponent<EditableManagerUiProps>("EditableManagerUi")
 
                     button {
                         +"Apply"
-                        attrs.disabled = !props.editableManager.isModified()
+                        attrs["disabled"] = !props.editableManager.isModified()
                         attrs.color = ButtonColor.primary
                         attrs.onClickFunction = handleApply
                     }
diff --git a/src/jsMain/kotlin/baaahs/gl/preview/MovingHeadPreview.kt b/src/jsMain/kotlin/baaahs/gl/preview/MovingHeadPreview.kt
@@ -0,0 +1,85 @@
+package baaahs.gl.preview
+
+import baaahs.fixtures.*
+import baaahs.gl.GlBase
+import baaahs.gl.glsl.GlslProgram
+import baaahs.gl.render.ModelRenderEngine
+import baaahs.model.Model
+import baaahs.window
+import org.w3c.dom.CanvasRenderingContext2D
+import org.w3c.dom.HTMLCanvasElement
+
+class MovingHeadPreview(
+    canvas2d: HTMLCanvasElement,
+    gl: GlBase.JsGlContext,
+    private var width: Int,
+    private var height: Int,
+    model: Model,
+    private val preRenderCallback: (() -> Unit)? = null
+) : ShaderPreview {
+    private var running = false
+    private val deviceType = MovingHeadDevice
+    override val renderEngine = ModelRenderEngine(gl, model, deviceType)
+    private var movingHeadProgram: GlslProgram? = null
+    private val renderTargets = model.movingHeads.associateWith { surface ->
+        val fixture = Fixture(surface, 1, emptyList(), deviceType, transport = NullTransport)
+        renderEngine.addFixture(fixture)
+    }
+    private val context2d = canvas2d.getContext("2d") as CanvasRenderingContext2D
+
+    override fun start() {
+        running = true
+        render()
+    }
+
+    override fun stop() {
+        running = false
+    }
+
+    override fun destroy() {
+        stop()
+        movingHeadProgram?.release()
+    }
+
+    override fun setProgram(program: GlslProgram?) {
+        renderEngine.setRenderPlan(
+            DeviceTypeRenderPlan(
+                listOf(ProgramRenderPlan(program, renderTargets.values.toList()))
+            )
+        )
+        movingHeadProgram = program
+    }
+
+    override fun render() {
+        if (!running) return
+
+        if (movingHeadProgram != null) {
+            preRenderCallback?.invoke()
+
+            renderEngine.draw()
+
+            context2d.strokeStyle = "#ffffff"
+            context2d.lineWidth = 2.0
+            context2d.fillStyle = "#000000"
+            context2d.fillRect(0.0, 0.0, width.toDouble(), height.toDouble())
+
+            context2d.fillStyle = "#ffffff"
+            context2d.fillText("Fixture\tPan\tTilt\tColor\tDimmer", 3.0, 15.0)
+            var y = 30.0
+
+            renderTargets.forEach { (surface, renderTarget) ->
+                val params = deviceType.getResults(renderTarget.resultViews).buffer.get(0)
+                context2d.fillText("${surface.name}\t${params.pan}\t${params.tilt}\t${params.colorWheel}\t${params.dimmer}",
+                    3.0, y)
+                y += 15.0
+            }
+        }
+
+        window.requestAnimationFrame { render() }
+    }
+
+    override fun resize(width: Int, height: Int) {
+        this.width = width
+        this.height = height
+    }
+}
diff --git a/src/jsMain/kotlin/baaahs/gl/preview/ProjectionPreview.kt b/src/jsMain/kotlin/baaahs/gl/preview/ProjectionPreview.kt
@@ -1,12 +1,12 @@
-package baaahs.gl.render
+package baaahs.gl.preview
 
 import baaahs.fixtures.DeviceTypeRenderPlan
 import baaahs.fixtures.Fixture
 import baaahs.fixtures.NullTransport
 import baaahs.fixtures.ProgramRenderPlan
 import baaahs.gl.GlBase
 import baaahs.gl.glsl.GlslProgram
-import baaahs.gl.preview.ProjectionPreviewDevice
+import baaahs.gl.render.ModelRenderEngine
 import baaahs.model.Model
 import baaahs.window
 import org.w3c.dom.CanvasRenderingContext2D
diff --git a/src/jsMain/kotlin/baaahs/gl/preview/QuadPreview.kt b/src/jsMain/kotlin/baaahs/gl/preview/QuadPreview.kt
@@ -1,7 +1,8 @@
-package baaahs.gl.render
+package baaahs.gl.preview
 
 import baaahs.gl.GlContext
 import baaahs.gl.glsl.GlslProgram
+import baaahs.gl.render.PreviewRenderEngine
 import baaahs.window
 
 class QuadPreview(
diff --git a/src/jsMain/kotlin/baaahs/gl/preview/ShaderPreviewBootstrapper.kt b/src/jsMain/kotlin/baaahs/gl/preview/ShaderPreviewBootstrapper.kt
diff --git a/src/jvmMain/kotlin/baaahs/gl/preview/ShaderPreviewBootstrapper.kt b/src/jvmMain/kotlin/baaahs/gl/preview/ShaderPreviewBootstrapper.kt
