Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web] No implicit view in multi-view mode #48505

Merged
merged 1 commit into from
Nov 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions lib/web_ui/lib/src/engine/canvas_pool.dart
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import 'safe_browser_api.dart';
import 'shadow.dart';
import 'util.dart';
import 'vector_math.dart';
import 'window.dart';

/// Renders picture to a CanvasElement by allocating and caching 0 or more
/// canvas(s) for [BitmapCanvas].
Expand Down Expand Up @@ -1039,7 +1038,7 @@ class ContextStateHandle {
//
// transformedShadowDelta = M*shadowDelta - M*origin.
final Float32List tempVector = Float32List(2);
tempVector[0] = kOutsideTheBoundsOffset * window.devicePixelRatio;
tempVector[0] = kOutsideTheBoundsOffset * EngineFlutterDisplay.instance.devicePixelRatio;
_canvasPool.currentTransform.transform2(tempVector);
final double shadowOffsetX = tempVector[0];
final double shadowOffsetY = tempVector[1];
Expand Down
3 changes: 2 additions & 1 deletion lib/web_ui/lib/src/engine/canvaskit/canvas.dart
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'dart:typed_data';
import 'package:ui/ui.dart' as ui;

import '../color_filter.dart';
import '../display.dart';
import 'canvaskit_api.dart';
import 'color_filter.dart';
import 'image.dart';
Expand Down Expand Up @@ -248,7 +249,7 @@ class CkCanvas {
void drawShadow(
CkPath path, ui.Color color, double elevation, bool transparentOccluder) {
drawSkShadow(skCanvas, path, color, elevation, transparentOccluder,
ui.window.devicePixelRatio);
EngineFlutterDisplay.instance.devicePixelRatio);
}

void drawVertices(
Expand Down
6 changes: 3 additions & 3 deletions lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
import 'package:ui/ui.dart' as ui;

import '../../engine.dart' show PlatformViewManager;
import '../display.dart';
import '../dom.dart';
import '../html/path_to_svg_clip.dart';
import '../platform_views/slots.dart';
import '../svg.dart';
import '../util.dart';
import '../vector_math.dart';
import '../window.dart';
import 'canvas.dart';
import 'embedded_views_diff.dart';
import 'path.dart';
Expand Down Expand Up @@ -68,7 +68,7 @@ class HtmlViewEmbedder {
List<OverlayGroup> _activeOverlayGroups = <OverlayGroup>[];

/// The size of the frame, in physical pixels.
ui.Size _frameSize = ui.window.physicalSize;
late ui.Size _frameSize;

set frameSize(ui.Size size) {
_frameSize = size;
Expand Down Expand Up @@ -326,7 +326,7 @@ class HtmlViewEmbedder {
//
// HTML elements use logical (CSS) pixels, but we have been using physical
// pixels, so scale down the head element to match the logical resolution.
final double scale = window.devicePixelRatio;
final double scale = EngineFlutterDisplay.instance.devicePixelRatio;
final double inverseScale = 1 / scale;
final Matrix4 scaleMatrix =
Matrix4.diagonal3Values(inverseScale, inverseScale, 1);
Expand Down
3 changes: 0 additions & 3 deletions lib/web_ui/lib/src/engine/canvaskit/layer_tree.dart
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ class LayerTree {
/// The root of the layer tree.
final RootLayer rootLayer;

/// The size (in physical pixels) of the frame to paint this layer tree into.
final ui.Size frameSize = ui.window.physicalSize;

/// The devicePixelRatio of the frame to paint this layer tree into.
double? devicePixelRatio;

Expand Down
10 changes: 6 additions & 4 deletions lib/web_ui/lib/src/engine/canvaskit/rasterizer.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import 'package:ui/ui.dart' as ui;

/// A class that can rasterize [LayerTree]s into a given `sceneHost` element.
class Rasterizer {
Rasterizer(this.sceneHost);
Rasterizer(this.view);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh yes, I thought of making this change. Good call!


final DomElement sceneHost;
final EngineFlutterView view;
DomElement get sceneHost => view.dom.sceneHost;
final CompositorContext context = CompositorContext();
final RenderCanvasFactory renderCanvasFactory = RenderCanvasFactory();
late final HtmlViewEmbedder viewEmbedder =
Expand All @@ -30,12 +31,13 @@ class Rasterizer {
/// Creates a new frame from this rasterizer's surface, draws the given
/// [LayerTree] into it, and then submits the frame.
void draw(LayerTree layerTree) {
if (layerTree.frameSize.isEmpty) {
final ui.Size frameSize = view.physicalSize;
if (frameSize.isEmpty) {
// Available drawing area is empty. Skip drawing.
return;
}

_currentFrameSize = layerTree.frameSize;
_currentFrameSize = frameSize;
CanvasKitRenderer.instance.offscreenSurface.acquireFrame(_currentFrameSize);
viewEmbedder.frameSize = _currentFrameSize;
final CkPictureRecorder pictureRecorder = CkPictureRecorder();
Expand Down
11 changes: 6 additions & 5 deletions lib/web_ui/lib/src/engine/canvaskit/render_canvas.dart
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import 'dart:js_interop';

import 'package:ui/ui.dart' as ui;

import '../display.dart';
import '../dom.dart';
import '../window.dart';

/// A visible (on-screen) canvas that can display bitmaps produced by CanvasKit
/// in the (off-screen) SkSurface which is backed by an OffscreenCanvas.
Expand Down Expand Up @@ -68,12 +68,13 @@ class RenderCanvas {
/// match the size of the window precisely we use the most precise floating
/// point value we can get.
void _updateLogicalHtmlCanvasSize() {
final double logicalWidth = _pixelWidth / window.devicePixelRatio;
final double logicalHeight = _pixelHeight / window.devicePixelRatio;
final double devicePixelRatio = EngineFlutterDisplay.instance.devicePixelRatio;
final double logicalWidth = _pixelWidth / devicePixelRatio;
final double logicalHeight = _pixelHeight / devicePixelRatio;
final DomCSSStyleDeclaration style = canvasElement.style;
style.width = '${logicalWidth}px';
style.height = '${logicalHeight}px';
_currentDevicePixelRatio = window.devicePixelRatio;
_currentDevicePixelRatio = devicePixelRatio;
}

/// Render the given [bitmap] with this [RenderCanvas].
Expand Down Expand Up @@ -112,7 +113,7 @@ class RenderCanvas {
size.height.ceil() == _pixelHeight) {
// The existing canvas doesn't need to be resized (unless the device pixel
// ratio changed).
if (window.devicePixelRatio != _currentDevicePixelRatio) {
if (EngineFlutterDisplay.instance.devicePixelRatio != _currentDevicePixelRatio) {
_updateLogicalHtmlCanvasSize();
}
return;
Expand Down
2 changes: 1 addition & 1 deletion lib/web_ui/lib/src/engine/canvaskit/renderer.dart
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,7 @@ class CanvasKitRenderer implements Renderer {

Rasterizer _getRasterizerForView(EngineFlutterView view) {
return _rasterizers.putIfAbsent(view, () {
return Rasterizer(view.dom.sceneHost);
return Rasterizer(view);
});
}

Expand Down
7 changes: 3 additions & 4 deletions lib/web_ui/lib/src/engine/html/bitmap_canvas.dart
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import '../html_image_codec.dart';
import '../text/canvas_paragraph.dart';
import '../util.dart';
import '../vector_math.dart';
import '../window.dart';
import 'clip.dart';
import 'color_filter.dart';
import 'dom_canvas.dart';
Expand Down Expand Up @@ -1036,7 +1035,7 @@ class BitmapCanvas extends EngineCanvas {
_drawPointsPaint.color = paint.color;
_drawPointsPaint.maskFilter = paint.maskFilter;

final double dpr = ui.window.devicePixelRatio;
final double dpr = EngineFlutterDisplay.instance.devicePixelRatio;
// Use hairline (device pixel when strokeWidth is not specified).
final double strokeWidth =
paint.strokeWidth == null ? 1.0 / dpr : paint.strokeWidth!;
Expand Down Expand Up @@ -1077,7 +1076,7 @@ class BitmapCanvas extends EngineCanvas {
/// viewport.
ui.Rect _computeScreenBounds(Matrix4 targetTransform) {
final Matrix4 inverted = targetTransform.clone()..invert();
final double dpr = ui.window.devicePixelRatio;
final double dpr = EngineFlutterDisplay.instance.devicePixelRatio;
final double width = ui.window.physicalSize.width * dpr;
final double height = ui.window.physicalSize.height * dpr;
final Vector3 topLeft = inverted.perspectiveTransform(x: 0, y: 0, z: 0);
Expand Down Expand Up @@ -1457,7 +1456,7 @@ String maskFilterToCanvasFilter(ui.MaskFilter? maskFilter) {
if (maskFilter != null) {
// Multiply by device-pixel ratio because the canvas' pixel width and height
// are larger than its CSS width and height by device-pixel ratio.
return 'blur(${maskFilter.webOnlySigma * window.devicePixelRatio}px)';
return 'blur(${maskFilter.webOnlySigma * EngineFlutterDisplay.instance.devicePixelRatio}px)';
} else {
return 'none';
}
Expand Down
6 changes: 3 additions & 3 deletions lib/web_ui/lib/src/engine/html/scene_builder.dart
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ import 'package:ui/ui.dart' as ui;
import 'package:ui/ui_web/src/ui_web.dart' as ui_web;

import '../../engine.dart' show kProfileApplyFrame, kProfilePrerollFrame;
import '../display.dart';
import '../dom.dart';
import '../picture.dart';
import '../profiler.dart';
import '../util.dart';
import '../vector_math.dart';
import '../window.dart';
import 'backdrop_filter.dart';
import 'clip.dart';
import 'color_filter.dart';
Expand Down Expand Up @@ -113,8 +113,8 @@ class SurfaceSceneBuilder implements ui.SceneBuilder {
// scene to devicepixelratio. Use identity instead since CSS uses
// logical device pixels.
if (!ui_web.debugEmulateFlutterTesterEnvironment) {
assert(matrix4[0] == window.devicePixelRatio &&
matrix4[5] == window.devicePixelRatio);
assert(matrix4[0] == EngineFlutterDisplay.instance.devicePixelRatio &&
matrix4[5] == EngineFlutterDisplay.instance.devicePixelRatio);
}
matrix = Matrix4.identity().storage;
} else {
Expand Down
6 changes: 4 additions & 2 deletions lib/web_ui/lib/src/engine/initialization.dart
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,10 @@ Future<void> initializeEngineUi() async {
_initializationState = DebugEngineInitializationState.initializingUi;

RawKeyboard.initialize(onMacOs: operatingSystem == OperatingSystem.macOs);
ensureImplicitViewInitialized(hostElement: configuration.hostElement);
ensureFlutterViewEmbedderInitialized();
if (!configuration.multiViewEnabled) {
ensureImplicitViewInitialized(hostElement: configuration.hostElement);
ensureFlutterViewEmbedderInitialized();
}
Comment on lines +221 to +224
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's goooo!

_initializationState = DebugEngineInitializationState.initialized;
}

Expand Down
51 changes: 38 additions & 13 deletions lib/web_ui/lib/src/engine/platform_dispatcher.dart
Original file line number Diff line number Diff line change
Expand Up @@ -500,10 +500,22 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
// TODO(a-wallen): As multi-window support expands, the pop call
// will need to include the view ID. Right now only one view is
// supported.
implicitView!.browserHistory.exit().then((_) {
//
// TODO(mdebbar): What should we do in multi-view mode?
// https://github.com/flutter/flutter/issues/139174
Comment on lines +504 to +505
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we CC a-wallen in the issue? I think both your comment and the one above are talking about the multi-window support.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @a-wallen :)

if (implicitView != null) {
implicitView!.browserHistory.exit().then((_) {
replyToPlatformMessage(
callback,
jsonCodec.encodeSuccessEnvelope(true),
);
});
} else {
replyToPlatformMessage(
callback, jsonCodec.encodeSuccessEnvelope(true));
});
callback,
jsonCodec.encodeSuccessEnvelope(true),
);
}
return;
case 'HapticFeedback.vibrate':
final String? type = decoded.arguments as String?;
Expand Down Expand Up @@ -588,7 +600,9 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
decoded.arguments as Map<dynamic, dynamic>;
switch (decoded.method) {
case 'activateSystemCursor':
implicitView!.mouseCursor
// TODO(mdebbar): This needs a view ID from the framework.
// https://github.com/flutter/flutter/issues/137289
implicitView?.mouseCursor
.activateSystemCursor(arguments.tryString('kind'));
}
return;
Expand Down Expand Up @@ -628,14 +642,23 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
// TODO(a-wallen): As multi-window support expands, the navigation call
// will need to include the view ID. Right now only one view is
// supported.
implicitView!.handleNavigationMessage(data).then((bool handled) {
if (handled) {
replyToPlatformMessage(
callback, jsonCodec.encodeSuccessEnvelope(true));
} else {
callback?.call(null);
}
});
//
// TODO(mdebbar): What should we do in multi-view mode?
// https://github.com/flutter/flutter/issues/139174
if (implicitView != null) {
implicitView!.handleNavigationMessage(data).then((bool handled) {
if (handled) {
replyToPlatformMessage(
callback,
jsonCodec.encodeSuccessEnvelope(true),
);
} else {
callback?.call(null);
}
});
} else {
callback?.call(null);
}

// As soon as Flutter starts taking control of the app navigation, we
// should reset _defaultRouteName to "/" so it doesn't have any
Expand Down Expand Up @@ -1249,7 +1272,9 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
/// requests from the embedder.
@override
String get defaultRouteName {
return _defaultRouteName ??= implicitView!.browserHistory.currentPath;
// TODO(mdebbar): What should we do in multi-view mode?
// https://github.com/flutter/flutter/issues/139174
return _defaultRouteName ??= implicitView?.browserHistory.currentPath ?? '/';
}

/// Lazily initialized when the `defaultRouteName` getter is invoked.
Expand Down
19 changes: 11 additions & 8 deletions lib/web_ui/lib/src/engine/scene_view.dart
Original file line number Diff line number Diff line change
Expand Up @@ -194,10 +194,11 @@ final class PictureSliceContainer extends SliceContainer {
bounds.bottom.ceilToDouble()
);
final DomCSSStyleDeclaration style = canvas.style;
final double logicalWidth = roundedOutBounds.width / window.devicePixelRatio;
final double logicalHeight = roundedOutBounds.height / window.devicePixelRatio;
final double logicalLeft = roundedOutBounds.left / window.devicePixelRatio;
final double logicalTop = roundedOutBounds.top / window.devicePixelRatio;
final double devicePixelRatio = EngineFlutterDisplay.instance.devicePixelRatio;
final double logicalWidth = roundedOutBounds.width / devicePixelRatio;
final double logicalHeight = roundedOutBounds.height / devicePixelRatio;
final double logicalLeft = roundedOutBounds.left / devicePixelRatio;
final double logicalTop = roundedOutBounds.top / devicePixelRatio;
style.width = '${logicalWidth}px';
style.height = '${logicalHeight}px';
style.position = 'absolute';
Expand Down Expand Up @@ -243,21 +244,23 @@ final class PlatformViewContainer extends SliceContainer {
}
}


@override
void updateContents() {
assert(_styling != null);
assert(_size != null);
if (_dirty) {
final DomCSSStyleDeclaration style = container.style;
final double logicalWidth = _size!.width / window.devicePixelRatio;
final double logicalHeight = _size!.height / window.devicePixelRatio;
final double devicePixelRatio = EngineFlutterDisplay.instance.devicePixelRatio;
final double logicalWidth = _size!.width / devicePixelRatio;
final double logicalHeight = _size!.height / devicePixelRatio;
style.width = '${logicalWidth}px';
style.height = '${logicalHeight}px';
style.position = 'absolute';

final ui.Offset? offset = _styling!.position.offset;
final double logicalLeft = (offset?.dx ?? 0) / window.devicePixelRatio;
final double logicalTop = (offset?.dy ?? 0) / window.devicePixelRatio;
final double logicalLeft = (offset?.dx ?? 0) / devicePixelRatio;
final double logicalTop = (offset?.dy ?? 0) / devicePixelRatio;
style.left = '${logicalLeft}px';
style.top = '${logicalTop}px';

Expand Down
2 changes: 1 addition & 1 deletion lib/web_ui/lib/src/engine/skwasm/skwasm_impl/canvas.dart
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ class SkwasmCanvas implements SceneCanvas {
_handle,
path.handle,
elevation,
ui.window.devicePixelRatio,
EngineFlutterDisplay.instance.devicePixelRatio,
color.value,
transparentOccluder);
}
Expand Down