Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Fix scene view canvas/platform view placement. #45199

Merged
merged 2 commits into from
Aug 29, 2023
Merged

Fix scene view canvas/platform view placement. #45199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d60f2ce
Fix scene view canvas/platform view placement.
eyebrowsoffire Aug 29, 2023
83c9939
Remove some random import the IDE jammed in there.
eyebrowsoffire Aug 29, 2023
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
12 changes: 8 additions & 4 deletions lib/web_ui/lib/src/engine/scene_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,11 +163,13 @@ final class PictureSliceContainer extends SliceContainer {
final DomCSSStyleDeclaration style = canvas.style;
final double logicalWidth = roundedOutBounds.width / window.devicePixelRatio;
Copy link
Contributor

@yjbanov yjbanov Aug 29, 2023

Choose a reason for hiding this comment

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

Do we lose the sub-pixel delta between the rounded values and the actual values? I wonder of this is why we get flutter/flutter#122541 in CanvasKit, and maybe we have the same issue in Skwasm?

Copy link
Contributor Author

@eyebrowsoffire eyebrowsoffire Aug 29, 2023

Choose a reason for hiding this comment

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

When I first implemented the platform views change (when it was a draft), I actually did have a ton of golden diffs because I had blurring due to what you're talking about. The rounding out of the rectangle fixed it, and got rid of the extra blurring and the goldens were consistent with previous behavior.

That being said, I am not 100% sure the existing behavior is totally correct. This change at least gets us back to the previous rendering behavior though. I think I will follow up and look a little deeper into this, just to make sure that we aren't ending up with any fractional weirdness here.

final double logicalHeight = roundedOutBounds.height / window.devicePixelRatio;
final double logicalLeft = roundedOutBounds.left / window.devicePixelRatio;
final double logicalTop = roundedOutBounds.top / window.devicePixelRatio;
style.width = '${logicalWidth}px';
style.height = '${logicalHeight}px';
style.position = 'absolute';
style.left = '${roundedOutBounds.left}px';
style.top = '${roundedOutBounds.top}px';
style.left = '${logicalLeft}px';
style.top = '${logicalTop}px';
canvas.width = roundedOutBounds.width.ceilToDouble();
canvas.height = roundedOutBounds.height.ceilToDouble();
}
Expand Down Expand Up @@ -221,8 +223,10 @@ final class PlatformViewContainer extends SliceContainer {
style.position = 'absolute';

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

final Matrix4? transform = _styling!.position.transform;
style.transform = transform != null ? float64ListToCssTransform3d(transform.storage) : '';
Expand Down
182 changes: 2 additions & 180 deletions lib/web_ui/test/engine/scene_builder_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:typed_data';

import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';

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

import 'scene_builder_utils.dart';

void main() {
internalBootstrapBrowserTest(() => testMain);
}
Expand Down Expand Up @@ -229,181 +229,3 @@ class PlatformViewSliceMatcher extends Matcher {
return true;
}
}

class StubPicture implements ScenePicture {
StubPicture(this.cullRect);

@override
final ui.Rect cullRect;

@override
int get approximateBytesUsed => throw UnimplementedError();

@override
bool get debugDisposed => throw UnimplementedError();

@override
void dispose() {}

@override
Future<ui.Image> toImage(int width, int height) {
throw UnimplementedError();
}

@override
ui.Image toImageSync(int width, int height) {
throw UnimplementedError();
}
}

class StubCompositePicture extends StubPicture {
StubCompositePicture(this.children) : super(
children.fold(null, (ui.Rect? previousValue, StubPicture child) {
return previousValue?.expandToInclude(child.cullRect) ?? child.cullRect;
})!
);

final List<StubPicture> children;
}

class StubPictureRecorder implements ui.PictureRecorder {
StubPictureRecorder(this.canvas);

final StubSceneCanvas canvas;

@override
ui.Picture endRecording() {
return StubCompositePicture(canvas.pictures);
}

@override
bool get isRecording => throw UnimplementedError();
}

class StubSceneCanvas implements SceneCanvas {
List<StubPicture> pictures = <StubPicture>[];

@override
void drawPicture(ui.Picture picture) {
pictures.add(picture as StubPicture);
}

@override
void clipPath(ui.Path path, {bool doAntiAlias = true}) {}

@override
void clipRRect(ui.RRect rrect, {bool doAntiAlias = true}) {}

@override
void clipRect(ui.Rect rect, {ui.ClipOp clipOp = ui.ClipOp.intersect, bool doAntiAlias = true}) {}

@override
void drawArc(ui.Rect rect, double startAngle, double sweepAngle, bool useCenter, ui.Paint paint) {}

@override
void drawAtlas(ui.Image atlas, List<ui.RSTransform> transforms, List<ui.Rect> rects, List<ui.Color>? colors, ui.BlendMode? blendMode, ui.Rect? cullRect, ui.Paint paint) {}

@override
void drawCircle(ui.Offset c, double radius, ui.Paint paint) {}

@override
void drawColor(ui.Color color, ui.BlendMode blendMode) {}

@override
void drawDRRect(ui.RRect outer, ui.RRect inner, ui.Paint paint) {}

@override
void drawImage(ui.Image image, ui.Offset offset, ui.Paint paint) {}

@override
void drawImageNine(ui.Image image, ui.Rect center, ui.Rect dst, ui.Paint paint) {}

@override
void drawImageRect(ui.Image image, ui.Rect src, ui.Rect dst, ui.Paint paint) {}

@override
void drawLine(ui.Offset p1, ui.Offset p2, ui.Paint paint) {}

@override
void drawOval(ui.Rect rect, ui.Paint paint) {}

@override
void drawPaint(ui.Paint paint) {}

@override
void drawParagraph(ui.Paragraph paragraph, ui.Offset offset) {}

@override
void drawPath(ui.Path path, ui.Paint paint) {}

@override
void drawPoints(ui.PointMode pointMode, List<ui.Offset> points, ui.Paint paint) {}

@override
void drawRRect(ui.RRect rrect, ui.Paint paint) {}

@override
void drawRawAtlas(ui.Image atlas, Float32List rstTransforms, Float32List rects, Int32List? colors, ui.BlendMode? blendMode, ui.Rect? cullRect, ui.Paint paint) {}

@override
void drawRawPoints(ui.PointMode pointMode, Float32List points, ui.Paint paint) {}

@override
void drawRect(ui.Rect rect, ui.Paint paint) {}

@override
void drawShadow(ui.Path path, ui.Color color, double elevation, bool transparentOccluder) {}

@override
void drawVertices(ui.Vertices vertices, ui.BlendMode blendMode, ui.Paint paint) {}

@override
ui.Rect getDestinationClipBounds() {
throw UnimplementedError();
}

@override
ui.Rect getLocalClipBounds() {
throw UnimplementedError();
}

@override
int getSaveCount() {
throw UnimplementedError();
}

@override
Float64List getTransform() {
throw UnimplementedError();
}

@override
void restore() {}

@override
void restoreToCount(int count) {}

@override
void rotate(double radians) {}

@override
void save() {}

@override
void saveLayer(ui.Rect? bounds, ui.Paint paint) {}

@override
void saveLayerWithFilter(ui.Rect? bounds, ui.Paint paint, ui.ImageFilter backdropFilter) {}

@override
void scale(double sx, [double? sy]) {}

@override
void skew(double sx, double sy) {}

@override
void transform(Float64List matrix4) {}

@override
void translate(double dx, double dy) {}
}
Loading