diff --git a/buildSrc/src/main/kotlin/Versions.kt b/buildSrc/src/main/kotlin/Versions.kt index 79d9a0cdfd..89197ae821 100644 --- a/buildSrc/src/main/kotlin/Versions.kt +++ b/buildSrc/src/main/kotlin/Versions.kt @@ -16,7 +16,7 @@ object Versions { // JS: const val kotlinxHtml = "0.9.1" - const val kotlinWrappers = "1.0.0-pre.648" + const val kotlinWrappers = "1.0.0-pre.662" // Test: const val junit = "5.8.1" diff --git a/src/jsMain/kotlin/baaahs/View.kt b/src/jsMain/kotlin/baaahs/View.kt index 8308ce2345..59fce69bea 100644 --- a/src/jsMain/kotlin/baaahs/View.kt +++ b/src/jsMain/kotlin/baaahs/View.kt @@ -1,8 +1,10 @@ package baaahs -import web.canvas.RenderingContextId +import web.canvas.CanvasRenderingContext2D import web.dom.DOMTokenList import web.dom.Element +import web.gl.WebGL2RenderingContext +import web.gl.WebGLRenderingContext import web.html.HTMLCanvasElement import web.html.HTMLElement @@ -29,4 +31,6 @@ fun DOMTokenList.clear() { fun HTMLElement.first(className: String) : T = (getElementsByClassName(className)[0] as T?)!! -fun HTMLCanvasElement.context2d() = this.getContext(RenderingContextId.canvas)!! +fun HTMLCanvasElement.get2DContext() = this.getContext(CanvasRenderingContext2D.ID)!! +fun HTMLCanvasElement.getWebGLContext() = this.getContext(WebGLRenderingContext.ID) +fun HTMLCanvasElement.getWebGL2Context() = this.getContext(WebGL2RenderingContext.ID) \ No newline at end of file diff --git a/src/jsMain/kotlin/baaahs/app/ui/dev/DevModeToolbarMenuView.kt b/src/jsMain/kotlin/baaahs/app/ui/dev/DevModeToolbarMenuView.kt index 35ad97abca..0d993a7b99 100644 --- a/src/jsMain/kotlin/baaahs/app/ui/dev/DevModeToolbarMenuView.kt +++ b/src/jsMain/kotlin/baaahs/app/ui/dev/DevModeToolbarMenuView.kt @@ -44,7 +44,7 @@ private val DevModeToolbarMenuView = xComponent("DevMod lastStats = curStats forceRender() } - }, ms = 50) + }, timeout = 50) withCleanup { clearInterval(callback) diff --git a/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt b/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt index 32adf1b7a1..9248b33019 100644 --- a/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt +++ b/src/jsMain/kotlin/baaahs/app/ui/editor/EditableManagerUiView.kt @@ -5,8 +5,8 @@ import baaahs.app.ui.dialog.DialogStyles import baaahs.app.ui.dialog.dialogPanels import baaahs.ui.* import external.ErrorBoundary -import external.mui.Portal import js.core.jso +import mui.base.Portal import mui.icons.material.Redo import mui.icons.material.Undo import mui.material.* diff --git a/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheel.kt b/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheel.kt index 388d4aa6b6..1620906dd9 100644 --- a/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheel.kt +++ b/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheel.kt @@ -2,8 +2,8 @@ package baaahs.app.ui.gadgets.color import baaahs.Color import baaahs.geom.Vector2F +import baaahs.get2DContext import web.canvas.CanvasRenderingContext2D -import web.canvas.RenderingContextId import web.html.HTMLCanvasElement import kotlin.math.floor import kotlin.math.max @@ -50,7 +50,7 @@ class ColorWheel( var harmonyMode: HarmonyMode = HarmonyMode.triad, var colors: Array = Array(3) { Color.WHITE } ) { - private val ctx = canvasEl.getContext(RenderingContextId.canvas) as CanvasRenderingContext2D + private val ctx = canvasEl.get2DContext() private var priorRadius: Int? = null diff --git a/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheelView.kt b/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheelView.kt index d181a7ba65..f6a1136cab 100644 --- a/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheelView.kt +++ b/src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheelView.kt @@ -17,9 +17,9 @@ import react.dom.* import react.dom.events.MouseEvent import react.useRef import styled.inlineStyles +import web.animations.requestAnimationFrame import web.html.HTMLCanvasElement import web.html.HTMLElement -import web.timers.requestAnimationFrame import kotlin.math.min private const val pickerRadius = 12 diff --git a/src/jsMain/kotlin/baaahs/app/ui/layout/GridTabLayoutView.kt b/src/jsMain/kotlin/baaahs/app/ui/layout/GridTabLayoutView.kt index 5cfac956e2..91ac3ea85d 100644 --- a/src/jsMain/kotlin/baaahs/app/ui/layout/GridTabLayoutView.kt +++ b/src/jsMain/kotlin/baaahs/app/ui/layout/GridTabLayoutView.kt @@ -22,10 +22,10 @@ import baaahs.ui.unaryPlus import baaahs.ui.xComponent import baaahs.unknown import baaahs.util.useResizeListener -import external.mui.Portal import external.react_resizable.buildResizeHandle import kotlinx.css.* import materialui.icon +import mui.base.Portal import mui.material.* import react.* import react.dom.div diff --git a/src/jsMain/kotlin/baaahs/app/ui/preview/ClientPreview.kt b/src/jsMain/kotlin/baaahs/app/ui/preview/ClientPreview.kt index 52a2256d31..91ffa82cbc 100644 --- a/src/jsMain/kotlin/baaahs/app/ui/preview/ClientPreview.kt +++ b/src/jsMain/kotlin/baaahs/app/ui/preview/ClientPreview.kt @@ -21,7 +21,7 @@ import kotlinx.coroutines.CoroutineStart import kotlinx.coroutines.GlobalScope import kotlinx.coroutines.launch import org.w3c.dom.get -import web.timers.requestAnimationFrame +import web.animations.requestAnimationFrame class ClientPreview( model: Model, diff --git a/src/jsMain/kotlin/baaahs/gl/JsGlBase.kt b/src/jsMain/kotlin/baaahs/gl/JsGlBase.kt index 20a4350e19..8b19809e67 100644 --- a/src/jsMain/kotlin/baaahs/gl/JsGlBase.kt +++ b/src/jsMain/kotlin/baaahs/gl/JsGlBase.kt @@ -1,11 +1,12 @@ package baaahs.gl import baaahs.document +import baaahs.getWebGL2Context +import baaahs.getWebGLContext import com.danielgergely.kgl.Kgl import com.danielgergely.kgl.KglJs -import org.khronos.webgl.ArrayBufferView -import org.khronos.webgl.WebGLObject -import web.canvas.RenderingContextId +import org.khronos.webgl.WebGLRenderingContext +import web.gl.WebGL2RenderingContext import web.html.HTMLCanvasElement import web.prompts.alert @@ -16,7 +17,7 @@ actual object GlBase { class JsGlManager : GlManager() { override val available: Boolean by lazy { val canvas = document.createElement("canvas") as HTMLCanvasElement - val gl = canvas.getContext(RenderingContextId.webgl) + val gl = canvas.getWebGLContext() gl != null } @@ -26,7 +27,7 @@ actual object GlBase { } fun createContext(canvas: HTMLCanvasElement, trace: Boolean = false): JsGlContext { - val webgl = canvas.getContext(RenderingContextId.webgl2) as WebGL2RenderingContext? + val webgl = canvas.getWebGL2Context() if (webgl == null) { alert( "Running GLSL shows on iOS requires WebGL 2.0.\n" + @@ -37,7 +38,7 @@ actual object GlBase { } return JsGlContext( canvas, - maybeTrace(KglJs(webgl), trace), + maybeTrace(KglJs(webgl.unsafeCast()), trace), "300 es", webgl ) @@ -75,11 +76,11 @@ actual object GlBase { /** Creates a related context with shared state and the given Kgl. */ open fun requestAnimationFrame(callback: (Double) -> Unit) { - web.timers.requestAnimationFrame(callback) + web.animations.requestAnimationFrame(callback) } private fun ensureExtension(name: String, required: Boolean): Boolean { - val extension = webgl.getExtension(name) + val extension = webgl.getExtension(name) as Any? if (required && extension == null) { alert("$name not supported") throw Exception("$name not supported") @@ -89,23 +90,21 @@ actual object GlBase { } } -abstract external class WebGL2RenderingContext : com.danielgergely.kgl.WebGL2RenderingContext { - fun fenceSync(condition: Int, flags: Int): WebGLSync - fun clientWaitSync(sync: WebGLSync, flags: Int, timeout: Number): Int - fun deleteSync(sync: WebGLSync): WebGLSync - fun readPixels(x: Int, y: Int, width: Int, height: Int, format: Int, type: Int, offset: Int) - fun getBufferSubData(target: Int, srcByteOffset: Int, dstData: ArrayBufferView, dstOffset: Int, length: Int) - - companion object { - val PIXEL_PACK_BUFFER: Int - val SYNC_GPU_COMMANDS_COMPLETE: Int - val ALREADY_SIGNALED: Int - val TIMEOUT_EXPIRED: Int - val CONDITION_SATISFIED: Int - val WAIT_FAILED: Int - val STATIC_READ: Int - val STREAM_READ: Int - } -} - -external class WebGLSync : WebGLObject +//abstract external class WebGL2RenderingContext : com.danielgergely.kgl.WebGL2RenderingContext { +// fun fenceSync(condition: Int, flags: Int): WebGLSync +// fun clientWaitSync(sync: WebGLSync, flags: Int, timeout: Number): Int +// fun deleteSync(sync: WebGLSync): WebGLSync +// fun readPixels(x: Int, y: Int, width: Int, height: Int, format: Int, type: Int, offset: Int) +// fun getBufferSubData(target: Int, srcByteOffset: Int, dstData: ArrayBufferView, dstOffset: Int, length: Int) +// +// companion object { +// val PIXEL_PACK_BUFFER: Int +// val SYNC_GPU_COMMANDS_COMPLETE: Int +// val ALREADY_SIGNALED: Int +// val TIMEOUT_EXPIRED: Int +// val CONDITION_SATISFIED: Int +// val WAIT_FAILED: Int +// val STATIC_READ: Int +// val STREAM_READ: Int +// } +//} \ No newline at end of file diff --git a/src/jsMain/kotlin/baaahs/gl/preview/MovingHeadPreview.kt b/src/jsMain/kotlin/baaahs/gl/preview/MovingHeadPreview.kt index 9bd9368ca2..314068b989 100644 --- a/src/jsMain/kotlin/baaahs/gl/preview/MovingHeadPreview.kt +++ b/src/jsMain/kotlin/baaahs/gl/preview/MovingHeadPreview.kt @@ -6,6 +6,7 @@ import baaahs.fixtures.FixtureTypeRenderPlan import baaahs.fixtures.NullTransport import baaahs.fixtures.ProgramRenderPlan import baaahs.fixtures.movingHeadFixture +import baaahs.get2DContext import baaahs.gl.GlContext import baaahs.gl.glsl.GlslProgram import baaahs.gl.render.ComponentRenderEngine @@ -15,11 +16,12 @@ import baaahs.model.MovingHead import baaahs.plugin.core.MovingHeadParams import kotlinx.coroutines.GlobalScope import kotlinx.coroutines.launch -import web.canvas.CanvasRenderingContext2D -import web.canvas.RenderingContextId +import web.animations.requestAnimationFrame import web.html.HTMLCanvasElement -import web.timers.requestAnimationFrame -import kotlin.math.* +import kotlin.math.PI +import kotlin.math.cos +import kotlin.math.roundToInt +import kotlin.math.sin private val Float.short: String @@ -50,7 +52,7 @@ class MovingHeadPreview( val fixture = movingHeadFixture(movingHead, 1, movingHead.name, NullTransport, movingHead.adapter) renderEngine.addFixture(fixture) } - private val context2d = canvas2d.getContext(RenderingContextId.canvas) as CanvasRenderingContext2D + private val context2d = canvas2d.get2DContext() override fun start() { running = true diff --git a/src/jsMain/kotlin/baaahs/gl/preview/ProjectionPreview.kt b/src/jsMain/kotlin/baaahs/gl/preview/ProjectionPreview.kt index ab55a3d210..faca6071b8 100644 --- a/src/jsMain/kotlin/baaahs/gl/preview/ProjectionPreview.kt +++ b/src/jsMain/kotlin/baaahs/gl/preview/ProjectionPreview.kt @@ -9,6 +9,7 @@ import baaahs.fixtures.NullTransport import baaahs.fixtures.ProgramRenderPlan import baaahs.geom.Vector2D import baaahs.geom.Vector3F +import baaahs.get2DContext import baaahs.gl.GlContext import baaahs.gl.glsl.GlslProgram import baaahs.gl.render.ComponentRenderEngine @@ -20,11 +21,9 @@ import baaahs.model.PixelArray import kotlinx.coroutines.GlobalScope import kotlinx.coroutines.launch import three.js.Vector2 -import web.canvas.CanvasRenderingContext2D +import web.animations.requestAnimationFrame import web.canvas.Path2D -import web.canvas.RenderingContextId import web.html.HTMLCanvasElement -import web.timers.requestAnimationFrame class ProjectionPreview( canvas2d: HTMLCanvasElement, @@ -75,7 +74,7 @@ class ProjectionPreview( } } - private val context2d = canvas2d.getContext(RenderingContextId.canvas) as CanvasRenderingContext2D + private val context2d = canvas2d.get2DContext() override fun start() { running = true diff --git a/src/jsMain/kotlin/baaahs/gl/render/WebGL2ResultDeliveryStrategy.kt b/src/jsMain/kotlin/baaahs/gl/render/WebGL2ResultDeliveryStrategy.kt index e19881b5b5..dfa5e58f2b 100644 --- a/src/jsMain/kotlin/baaahs/gl/render/WebGL2ResultDeliveryStrategy.kt +++ b/src/jsMain/kotlin/baaahs/gl/render/WebGL2ResultDeliveryStrategy.kt @@ -3,16 +3,19 @@ package baaahs.gl.render import baaahs.document import baaahs.gl.GlBase import baaahs.gl.GlContext -import baaahs.gl.WebGL2RenderingContext -import baaahs.gl.WebGL2RenderingContext.Companion.PIXEL_PACK_BUFFER -import baaahs.gl.WebGL2RenderingContext.Companion.STREAM_READ -import baaahs.gl.WebGL2RenderingContext.Companion.SYNC_GPU_COMMANDS_COMPLETE -import baaahs.gl.WebGLSync import baaahs.gl.result.ResultStorage import baaahs.internalTimerClock import com.danielgergely.kgl.Buffer import com.danielgergely.kgl.GlBuffer +import com.danielgergely.kgl.Kgl +import js.buffer.ArrayBufferView import kotlinx.coroutines.delay +import web.gl.GLenum +import web.gl.WebGL2RenderingContext +import web.gl.WebGL2RenderingContext.Companion.PIXEL_PACK_BUFFER +import web.gl.WebGL2RenderingContext.Companion.STREAM_READ +import web.gl.WebGL2RenderingContext.Companion.SYNC_GPU_COMMANDS_COMPLETE +import web.gl.WebGLSync actual fun pickResultDeliveryStrategy(gl: GlContext): ResultDeliveryStrategy { return SwitchingResultDeliveryStrategy(gl as GlBase.JsGlContext) @@ -76,7 +79,9 @@ class WebGl2ResultDeliveryStrategy(private val gl: GlBase.JsGlContext) : ResultD gl.check { bindBuffer(PIXEL_PACK_BUFFER, glBuf) } gl.check { webgl2.getBufferSubData( - PIXEL_PACK_BUFFER, 0, cpuBuffer.getJsBufferWithOffset(), 0, 0 + PIXEL_PACK_BUFFER, 0, + cpuBuffer.getJsBufferWithOffset().unsafeCast(), + 0, 0 ) } gl.check { bindBuffer(PIXEL_PACK_BUFFER, null) } @@ -86,12 +91,17 @@ class WebGl2ResultDeliveryStrategy(private val gl: GlBase.JsGlContext) : ResultD } } +private fun Kgl.bindBuffer(target: GLenum, bufferId: GlBuffer?) = + bindBuffer(target as Int, bufferId) + class FenceSync(private val gl: GlBase.JsGlContext) { private val webgl2 = gl.webgl private val fenceSync = gl.check { webgl2.fenceSync(SYNC_GPU_COMMANDS_COMPLETE, 0) } suspend fun await() { + fenceSync ?: error("Fence sync not supported.") + gl.check { webgl2.flush() } val startTime = internalTimerClock.now() diff --git a/src/jsMain/kotlin/baaahs/imaging/CanvasBitmap.kt b/src/jsMain/kotlin/baaahs/imaging/CanvasBitmap.kt index aac2d32b83..8b717723e7 100644 --- a/src/jsMain/kotlin/baaahs/imaging/CanvasBitmap.kt +++ b/src/jsMain/kotlin/baaahs/imaging/CanvasBitmap.kt @@ -1,7 +1,7 @@ package baaahs.imaging import baaahs.MediaDevices -import baaahs.context2d +import baaahs.get2DContext import com.danielgergely.kgl.ByteBuffer import org.khronos.webgl.ArrayBuffer import org.khronos.webgl.Uint8Array @@ -15,7 +15,7 @@ open class CanvasBitmap(internal val canvas: HTMLCanvasElement) : Bitmap { override val width = canvas.width override val height = canvas.height - internal val ctx = canvas.context2d() + internal val ctx = canvas.get2DContext() override fun drawImage(image: Image) { (image as JsImage).draw(ctx, 0, 0) @@ -113,7 +113,7 @@ open class CanvasBitmap(internal val canvas: HTMLCanvasElement) : Bitmap { override fun clone(): Bitmap { val newCanvas = createCanvas(canvas.width, canvas.height) - val ctx = newCanvas.context2d() + val ctx = newCanvas.get2DContext() ctx.drawImage(canvas, 0.0, 0.0) return CanvasBitmap(newCanvas) } diff --git a/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt b/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt index ce3167fcbb..f712f624f2 100644 --- a/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt +++ b/src/jsMain/kotlin/baaahs/imaging/JsImaging.kt @@ -1,8 +1,8 @@ package baaahs.imaging -import baaahs.context2d import baaahs.decodeBase64 import baaahs.document +import baaahs.get2DContext import baaahs.util.Clock import baaahs.util.JsClock import external.gifuct.ParsedFrameDims @@ -11,20 +11,20 @@ import external.gifuct.parseGIF import js.typedarrays.Uint8Array import js.typedarrays.Uint8ClampedArray import kotlinx.coroutines.await -import org.khronos.webgl.WebGLRenderingContext import org.khronos.webgl.get import web.canvas.CanvasRenderingContext2D import web.canvas.ImageBitmap -import web.canvas.ImageBitmapSource import web.canvas.ImageData +import web.gl.WebGLRenderingContext import web.html.HTMLCanvasElement +import web.html.HTMLImageElement import web.html.HTMLVideoElement actual fun imageFromDataUrl(dataUrl: String): Image { return if (dataUrl.looksLikeGif()) { GifImage(decodeBase64(dataUrl.substringAfter(","))) } else { - val image = org.w3c.dom.Image() + val image = web.html.Image() image.src = dataUrl return DomImage(image) } @@ -49,11 +49,11 @@ abstract class JsImage : Image { ) } -class DomImage(val image: org.w3c.dom.Image) : JsImage() { +class DomImage(val image: web.html.Image) : JsImage() { override val width: Int - get() = image.width + get() = image.width.toInt() override val height: Int - get() = image.height + get() = image.height.toInt() override fun draw(ctx: CanvasRenderingContext2D, x: Int, y: Int) { ctx.drawImage(image, x.toDouble(), y.toDouble()) @@ -87,18 +87,20 @@ class DomImage(val image: org.w3c.dom.Image) : JsImage() { class WebGlImage(private val webGlContext: WebGLRenderingContext) : JsImage() { override val width: Int - get() = webGlContext.drawingBufferWidth + get() = webGlContext.drawingBufferWidth.toInt() override val height: Int - get() = webGlContext.drawingBufferHeight + get() = webGlContext.drawingBufferHeight.toInt() + private val canvas: HTMLCanvasElement + get() = webGlContext.canvas as HTMLCanvasElement override fun toBitmap(): Bitmap { val newCanvas = createCanvas(width, height) - newCanvas.context2d().drawImage(webGlContext.canvas, 0.0, 0.0) + newCanvas.get2DContext().drawImage(canvas, 0.0, 0.0) return CanvasBitmap(newCanvas) } override fun draw(ctx: CanvasRenderingContext2D, x: Int, y: Int) { - ctx.drawImage(webGlContext.canvas, x.toDouble(), y.toDouble()) + ctx.drawImage(canvas, x.toDouble(), y.toDouble()) } override fun draw( @@ -107,7 +109,7 @@ class WebGlImage(private val webGlContext: WebGLRenderingContext) : JsImage() { dX: Int, dY: Int, dWidth: Int, dHeight: Int ) { ctx.drawImage( - webGlContext.canvas, + canvas, sX.toDouble(), sY.toDouble(), sWidth.toDouble(), sHeight.toDouble(), dX.toDouble(), dY.toDouble(), dWidth.toDouble(), dHeight.toDouble() ) @@ -141,7 +143,7 @@ class ImageBitmapImage(private val imageBitmap: ImageBitmap) : JsImage() { } companion object { - suspend fun fromImg(image: ImageBitmapSource) = + suspend fun fromImg(image: HTMLImageElement) = ImageBitmapImage( kotlinx.browser.window.createImageBitmap( image.unsafeCast() @@ -258,7 +260,7 @@ class GifImage(data: ByteArray, clock: Clock = JsClock) : Image { recentFrame = frameIndex return CanvasBitmap(width, height).apply { - canvas.context2d().putImageData(imageDatas[frameIndex], 0.0, 0.0) + canvas.get2DContext().putImageData(imageDatas[frameIndex], 0.0, 0.0) } } diff --git a/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt b/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt index 78fb30370c..78092880a1 100644 --- a/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt +++ b/src/jsMain/kotlin/baaahs/mapper/JsMapper.kt @@ -32,18 +32,18 @@ import react.dom.br import three.js.* import three.js.Color import three_ext.* +import web.animations.requestAnimationFrame import web.canvas.CanvasImageSource import web.canvas.CanvasRenderingContext2D import web.canvas.ImageBitmap -import web.canvas.RenderingContextId import web.cssom.Cursor import web.events.Event import web.html.HTMLCanvasElement import web.html.HTMLElement import web.html.HTMLImageElement import web.prompts.prompt -import web.timers.requestAnimationFrame -import web.uievents.* +import web.uievents.KeyboardEvent +import web.uievents.MouseEvent import kotlin.collections.component1 import kotlin.collections.component2 import kotlin.collections.set @@ -190,7 +190,7 @@ class JsMapper( this.diffCanvas = diffCanvas this.snapshotCanvas = snapshotCanvas this.baseCanvas = baseCanvas - this.diffCtx = diffCanvas.context2d() + this.diffCtx = diffCanvas.get2DContext() this.panelMaskCanvas = panelMaskCanvas this.perfStatsDiv = perfStatsDiv @@ -1036,7 +1036,7 @@ class JsMapper( paintCamImage(image) changeRegion?.apply { - val ui2dCtx = ui2dCanvas.getContext(RenderingContextId.canvas) as CanvasRenderingContext2D + val ui2dCtx = ui2dCanvas.get2DContext() ui2dCtx.lineWidth = 2.0 ui2dCtx.strokeStyle = "#ff0000" ui2dCtx.strokeRect(x0.toDouble(), y0.toDouble(), width.toDouble(), height.toDouble()) @@ -1056,7 +1056,7 @@ class JsMapper( private fun HTMLCanvasElement.showImage(bitmap: Bitmap, changeRegion: MediaDevices.Region? = null) { console.log("Draw ", bitmap, " to ", this) - val ctx2d = getContext(RenderingContextId.canvas) as CanvasRenderingContext2D + val ctx2d = get2DContext() ctx2d.resetTransform() val renderBitmap = when (bitmap) { // TODO: huh? is CanvasBitmap -> bitmap.canvas diff --git a/src/jsMain/kotlin/baaahs/sim/FakeMediaDevices.kt b/src/jsMain/kotlin/baaahs/sim/FakeMediaDevices.kt index 4fb6284216..cf51763249 100644 --- a/src/jsMain/kotlin/baaahs/sim/FakeMediaDevices.kt +++ b/src/jsMain/kotlin/baaahs/sim/FakeMediaDevices.kt @@ -11,6 +11,7 @@ import three.js.Camera import three.js.PerspectiveCamera import three.js.Scene import three.js.WebGLRenderer +import web.gl.WebGLRenderingContext class FakeMediaDevices( private val visualizer: Visualizer, @@ -48,13 +49,13 @@ class FakeMediaDevices( inner class FakeCamera(val width: Int, val height: Int) : MediaDevices.Camera, BaseVisualizer.FrameListener { // offscreen renderer for virtual camera: - var camRenderer = WebGLRenderer(jso { preserveDrawingBuffer = true}).apply { + private var camRenderer = WebGLRenderer(jso { preserveDrawingBuffer = true}).apply { setSize(width, height) } private val camCtx = camRenderer.getContext() private val altCamera = PerspectiveCamera(45, 1.0, 1, 10000) - private val webGlImage = WebGlImage(camCtx) + private val webGlImage = WebGlImage(camCtx.unsafeCast()) override fun onFrameReady(scene: Scene, camera: Camera) { altCamera.copy(camera, true) diff --git a/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt b/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt index a877d0b68c..073a8f293b 100644 --- a/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt +++ b/src/jsMain/kotlin/baaahs/ui/components/PaletteView.kt @@ -5,7 +5,6 @@ import baaahs.app.ui.appContext import baaahs.geom.Vector2I import baaahs.sim.ui.simulatorContext import baaahs.ui.* -import external.mui.Portal import external.react_draggable.Draggable import external.react_resizable.Resizable import external.react_resizable.ResizeCallbackData @@ -15,6 +14,7 @@ import kotlinx.css.height import kotlinx.css.px import kotlinx.css.width import materialui.icon +import mui.base.Portal import mui.material.Paper import org.w3c.dom.events.MouseEvent import react.PropsWithChildren diff --git a/src/jsMain/kotlin/baaahs/ui/util.kt b/src/jsMain/kotlin/baaahs/ui/util.kt index 2d9e61fbde..297cd30da0 100644 --- a/src/jsMain/kotlin/baaahs/ui/util.kt +++ b/src/jsMain/kotlin/baaahs/ui/util.kt @@ -1,7 +1,7 @@ package baaahs.ui -import baaahs.context2d import baaahs.document +import baaahs.get2DContext import js.core.jso import kotlinext.js.getOwnPropertyNames import kotlinx.css.* @@ -276,7 +276,7 @@ fun HTMLElement.fitText() { val buttonWidth = parentEl.clientWidth - marginX val buttonHeight = parentEl.clientHeight - marginY val canvas = document.createElement("canvas") as HTMLCanvasElement - val ctx = canvas.context2d() + val ctx = canvas.get2DContext() val elementStyle = getComputedStyle(this) ctx.font = elementStyle.font val width = innerText.split(Regex("\\s+")).maxOf { word -> diff --git a/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt b/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt index c2a7114e38..a585453037 100644 --- a/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt +++ b/src/jsMain/kotlin/baaahs/visualizer/Visualizer.kt @@ -461,7 +461,7 @@ open class BaseVisualizer( } private fun requestAnimationFrame() { - web.timers.requestAnimationFrame { render() } + web.animations.requestAnimationFrame { render() } } // vector.applyMatrix(object.matrixWorld).project(camera) to get 2d x,y coord diff --git a/src/jsMain/kotlin/external/mui/Portal.kt b/src/jsMain/kotlin/external/mui/Portal.kt deleted file mode 100644 index d92b5ee941..0000000000 --- a/src/jsMain/kotlin/external/mui/Portal.kt +++ /dev/null @@ -1,22 +0,0 @@ -@file:JsModule("@mui/base/Portal") - -package external.mui - -import mui.base.PortalProps - -// TODO: kill when https://github.com/JetBrains/kotlin-wrappers/pull/2116 is addressed. - -/** - * Portals provide a first-class way to render children into a DOM node - * that exists outside the DOM hierarchy of the parent component. - * - * Demos: - * - * - [Portal](https://mui.com/base-ui/react-portal/) - * - * API: - * - * - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal) - */ -@JsName("Portal") -external val Portal: react.FC