merge

lib/web_ui/lib/src/engine/bitmap_canvas.dart

@@ -346,34 +346,91 @@ class BitmapCanvas extends EngineCanvas {
 
   @override
   void drawLine(ui.Offset p1, ui.Offset p2, SurfacePaintData paint) {
-    ui.Rect? shaderBounds = (paint.shader != null) ?
-        ui.Rect.fromPoints(p1, p2) : null;
-    _setUpPaint(paint, shaderBounds);
-    _canvasPool.strokeLine(p1, p2);
-    _tearDownPaint();
+    if (_useDomForRendering(paint)) {
+      final SurfacePath path = SurfacePath()
+        ..moveTo(p1.dx, p1.dy)
+        ..lineTo(p2.dx, p2.dy);
+      drawPath(path, paint);
+    } else {
+      ui.Rect? shaderBounds = (paint.shader != null) ?
+      ui.Rect.fromPoints(p1, p2) : null;
+      _setUpPaint(paint, shaderBounds);
+      _canvasPool.strokeLine(p1, p2);
+      _tearDownPaint();
+    }
   }
 
   @override
   void drawPaint(SurfacePaintData paint) {
-    ui.Rect? shaderBounds = (paint.shader != null) ?
-        _computePictureBounds() : null;
-    _setUpPaint(paint, shaderBounds);
-    _canvasPool.fill();
-    _tearDownPaint();
+    if (_useDomForRendering(paint)) {
+      drawRect(_computeScreenBounds(_canvasPool._currentTransform), paint);
+    } else {
+      ui.Rect? shaderBounds = (paint.shader != null) ?
+      _computePictureBounds() : null;
+      _setUpPaint(paint, shaderBounds);
+      _canvasPool.fill();
+      _tearDownPaint();
+    }
   }
 
   @override
   void drawRect(ui.Rect rect, SurfacePaintData paint) {
-    _setUpPaint(paint, rect);
-    _canvasPool.drawRect(rect, paint.style);
-    _tearDownPaint();
+    if (_useDomForRendering(paint)) {
+      html.HtmlElement element = _buildDrawRectElement(
+          rect, paint, 'draw-rect', _canvasPool._currentTransform);
+      _drawElement(
+          element,
+          ui.Offset(
+              math.min(rect.left, rect.right), math.min(rect.top, rect.bottom)),
+          paint);
+    } else {
+      _setUpPaint(paint, rect);
+      _canvasPool.drawRect(rect, paint.style);
+      _tearDownPaint();
+    }
+  }
+
+  /// Inserts a dom element at [offset] creating stack of divs for clipping
+  /// if required.
+  void _drawElement(
+      html.Element element, ui.Offset offset, SurfacePaintData paint) {
+    if (_canvasPool.isClipped) {
+      final List<html.Element> clipElements = _clipContent(
+          _canvasPool._clipStack!,
+          element,
+          ui.Offset.zero,
+          transformWithOffset(_canvasPool._currentTransform, offset));
+      for (html.Element clipElement in clipElements) {
+        rootElement.append(clipElement);
+        _children.add(clipElement);
+      }
+    } else {
+      rootElement.append(element);
+      _children.add(element);
+    }
+    ui.BlendMode? blendMode = paint.blendMode;
+    if (blendMode != null) {
+      element.style.mixBlendMode = _stringForBlendMode(blendMode) ?? '';
+    }
   }
 
   @override
   void drawRRect(ui.RRect rrect, SurfacePaintData paint) {
+    final ui.Rect rect = rrect.outerRect;
+    if (_useDomForRendering(paint)) {
+      html.HtmlElement element = _buildDrawRectElement(
+          rect, paint, 'draw-rrect', _canvasPool._currentTransform);
+      _applyRRectBorderRadius(element.style, rrect);
+      _drawElement(
+          element,
+          ui.Offset(
+              math.min(rect.left, rect.right), math.min(rect.top, rect.bottom)),
+          paint);
+    } else {
     _setUpPaint(paint, rrect.outerRect);
     _canvasPool.drawRRect(rrect, paint.style);
-    _tearDownPaint();
+      _tearDownPaint();
+    }
   }
 
   @override
@@ -385,24 +442,63 @@ class BitmapCanvas extends EngineCanvas {
 
   @override
   void drawOval(ui.Rect rect, SurfacePaintData paint) {
-    _setUpPaint(paint, rect);
-    _canvasPool.drawOval(rect, paint.style);
-    _tearDownPaint();
+    if (_useDomForRendering(paint)) {
+      html.HtmlElement element = _buildDrawRectElement(
+          rect, paint, 'draw-oval', _canvasPool._currentTransform);
+      _drawElement(
+          element,
+          ui.Offset(
+              math.min(rect.left, rect.right), math.min(rect.top, rect.bottom)),
+          paint);
+      element.style.borderRadius =
+          '${(rect.width / 2.0)}px / ${(rect.height / 2.0)}px';
+    } else {
+      _setUpPaint(paint, rect);
+      _canvasPool.drawOval(rect, paint.style);
+      _tearDownPaint();
+    }
   }
 
   @override
   void drawCircle(ui.Offset c, double radius, SurfacePaintData paint) {
-    _setUpPaint(paint, paint.shader != null
-        ? ui.Rect.fromCircle(center: c, radius: radius) : null);
-    _canvasPool.drawCircle(c, radius, paint.style);
-    _tearDownPaint();
+    ui.Rect rect = ui.Rect.fromCircle(center: c, radius: radius);
+    if (_useDomForRendering(paint)) {
+      html.HtmlElement element = _buildDrawRectElement(
+          rect, paint, 'draw-circle', _canvasPool._currentTransform);
+      _drawElement(
+          element,
+          ui.Offset(
+              math.min(rect.left, rect.right), math.min(rect.top, rect.bottom)),
+          paint);
+      element.style.borderRadius = '50%';
+    } else {
+      _setUpPaint(paint, paint.shader != null
+          ? ui.Rect.fromCircle(center: c, radius: radius) : null);
+      _canvasPool.drawCircle(c, radius, paint.style);
+      _tearDownPaint();
+    }
   }
 
   @override
   void drawPath(ui.Path path, SurfacePaintData paint) {
-    _setUpPaint(paint, paint.shader != null ? path.getBounds() : null);
-    _canvasPool.drawPath(path, paint.style);
-    _tearDownPaint();
+    if (_useDomForRendering(paint)) {
+      final Matrix4 transform = _canvasPool._currentTransform;
+      final SurfacePath surfacePath = path as SurfacePath;
+      final ui.Rect pathBounds = surfacePath.getBounds();
+      html.Element svgElm = _pathToSvgElement(
+          surfacePath, paint, '${pathBounds.right}', '${pathBounds.bottom}');
+      if (!_canvasPool.isClipped) {
+        svgElm.style
+          ..transform = matrix4ToCssTransform(transform)
+          ..transformOrigin = '0 0 0'
+          ..position = 'absolute';
+      }
+      _drawElement(svgElm, ui.Offset(0, 0), paint);
+    } else {
+      _setUpPaint(paint, paint.shader != null ? path.getBounds() : null);
+      _canvasPool.drawPath(path, paint.style);
+      _tearDownPaint();
+    }
   }
 
   @override