diff --git a/thermion_flutter/thermion_flutter_web/lib/thermion_flutter_web.dart b/thermion_flutter/thermion_flutter_web/lib/thermion_flutter_web.dart index 6bb4ba1b..fef48ccc 100644 --- a/thermion_flutter/thermion_flutter_web/lib/thermion_flutter_web.dart +++ b/thermion_flutter/thermion_flutter_web/lib/thermion_flutter_web.dart @@ -3,6 +3,7 @@ import 'package:thermion_dart/thermion_dart/thermion_viewer.dart'; import 'package:thermion_flutter_platform_interface/thermion_flutter_platform_interface.dart'; import 'package:thermion_flutter_platform_interface/thermion_flutter_texture.dart'; import 'package:flutter_web_plugins/flutter_web_plugins.dart'; +import 'package:thermion_flutter_web/thermion_flutter_web_options.dart'; import 'package:web/web.dart'; class ThermionFlutterWebPlugin extends ThermionFlutterPlatform { @@ -14,7 +15,7 @@ class ThermionFlutterWebPlugin extends ThermionFlutterPlatform { @override Future createTexture(double width, double height, - double offsetLeft, double offsetRight, double pixelRatio) async { + double offsetLeft, double offsetTop, double pixelRatio) async { await _viewer!.destroySwapChain(); await _viewer!.createSwapChain(width.ceil(), height.ceil()); @@ -22,6 +23,13 @@ class ThermionFlutterWebPlugin extends ThermionFlutterPlatform { canvas.width = (width * pixelRatio).ceil(); canvas.height = (height * pixelRatio).ceil(); + (canvas as HTMLElement).style.position = "fixed"; + (canvas as HTMLElement).style.zIndex = "-1"; + (canvas as HTMLElement).style.left = + (offsetLeft * pixelRatio).ceil().toString(); + (canvas as HTMLElement).style.top = + (offsetTop * pixelRatio).ceil().toString(); + _viewer! .updateViewportAndCameraProjection(width.ceil(), height.ceil(), 1.0); @@ -35,24 +43,42 @@ class ThermionFlutterWebPlugin extends ThermionFlutterPlatform { @override Future resizeTexture(ThermionFlutterTexture texture, - int width, int height, int offsetLeft, int offsetRight) async { + int width, int height, int offsetLeft, int offsetTop, double pixelRatio) async { final canvas = document.getElementById("canvas") as HTMLCanvasElement; canvas.width = width; canvas.height = height; + (canvas as HTMLElement).style.position = "fixed"; + (canvas as HTMLElement).style.zIndex = "-1"; + (canvas as HTMLElement).style.left = + (offsetLeft * pixelRatio).ceil().toString(); + (canvas as HTMLElement).style.top = + (offsetTop * pixelRatio).ceil().toString(); _viewer!.updateViewportAndCameraProjection(width, height, 1.0); return ThermionFlutterTexture(null, null, 0, 0, null); } - Future createViewer({String? uberArchivePath}) async { + Future createViewerWithOptions( + ThermionFlutterWebOptions options) async { _viewer = ThermionViewerWasm(assetPathPrefix: "/assets/"); - final canvas = document.createElement("canvas") as HTMLCanvasElement; + + final canvas = options.createCanvas + ? document.createElement("canvas") as HTMLCanvasElement? + : document.getElementById("canvas") as HTMLCanvasElement?; + if (canvas == null) { + throw Exception("Could not locate or create canvas"); + } canvas.id = "canvas"; document.body!.appendChild(canvas); canvas.style.display = 'none'; final pixelRatio = window.devicePixelRatio; - + await _viewer! - .initialize(1, 1, pixelRatio, uberArchivePath: uberArchivePath); + .initialize(1, 1, pixelRatio, uberArchivePath: options.uberarchivePath); return _viewer!; } + + @override + Future createViewer({String? uberarchivePath}) { + throw Exception("Use createViewerWithOptions instead"); + } }