Add support for saveLayer/restore (#10)

Adds support for encoding saveLayer and restore in the vector_graphics_codec.

Makes the transform property of nodes in the compiler lazy, and re-arranges how nodes are built in order to make it easier to determine if a saveLayer is required.

Author: jonahwilliams

packages/vector_graphics/lib/src/listener.dart

@@ -127,4 +127,14 @@ class FlutterVectorGraphicsListener extends VectorGraphicsCodecListener {
     _paths.add(path);
     _currentPath = path;
   }
+
+  @override
+  void onRestoreLayer() {
+    _canvas.restore();
+  }
+
+  @override
+  void onSaveLayer(int paintId) {
+    _canvas.saveLayer(null, _paints[paintId]);
+  }
 }

packages/vector_graphics/lib/vector_graphics.dart

@@ -204,6 +204,9 @@ class _RenderVectorGraphics extends RenderProxyBox {
 
   @override
   void paint(PaintingContext context, ui.Offset offset) {
+    if (offset != Offset.zero) {
+      context.canvas.translate(offset.dx, offset.dy);
+    }
     context.canvas.drawPicture(picture);
   }
 }

packages/vector_graphics_codec/lib/vector_graphics_codec.dart

@@ -18,6 +18,8 @@ class VectorGraphicsCodec {
   static const int _cubicToTag = 34;
   static const int _closeTag = 35;
   static const int _finishPathTag = 36;
+  static const int _saveLayer = 37;
+  static const int _restore = 38;
 
   static const int _version = 1;
   static const int _magicNumber = 0x00882d62;
@@ -78,6 +80,12 @@ class VectorGraphicsCodec {
         case _finishPathTag:
           listener?.onPathFinished();
           continue;
+        case _restore:
+          listener?.onRestoreLayer();
+          continue;
+        case _saveLayer:
+          _readSaveLayer(buffer, listener);
+          continue;
         default:
           throw StateError('Unknown type tag $type');
       }
@@ -313,6 +321,15 @@ class VectorGraphicsCodec {
     buffer._currentPathId = -1;
   }
 
+  void writeSaveLayer(VectorGraphicsBuffer buffer, int paint) {
+    buffer._putUint8(_saveLayer);
+    buffer._putInt32(paint);
+  }
+
+  void writeRestoreLayer(VectorGraphicsBuffer buffer) {
+    buffer._putUint8(_restore);
+  }
+
   void _readPath(_ReadBuffer buffer, VectorGraphicsCodecListener? listener) {
     final int fillType = buffer.getUint8();
     final int id = buffer.getInt32();
@@ -364,6 +381,12 @@ class VectorGraphicsCodec {
     }
     listener?.onDrawVertices(vertices, indices, paintId);
   }
+
+  void _readSaveLayer(
+      _ReadBuffer buffer, VectorGraphicsCodecListener? listener) {
+    final int paintId = buffer.getInt32();
+    listener?.onSaveLayer(paintId);
+  }
 }
 
 /// Implement this listener class to support decoding of vector_graphics binary
@@ -424,6 +447,12 @@ abstract class VectorGraphicsCodecListener {
     Uint16List? indices,
     int? paintId,
   );
+
+  /// Save a new layer with the given [paintId].
+  void onSaveLayer(int paintId);
+
+  /// Restore the save stack.
+  void onRestoreLayer();
 }
 
 enum _CurrentSection {

packages/vector_graphics_codec/test/vector_graphics_codec_test.dart

@@ -128,6 +128,31 @@ void main() {
       ], null, paintId),
     ]);
   });
+
+  test('Can encode opacity/save/restore layers', () {
+    final buffer = VectorGraphicsBuffer();
+    final TestListener listener = TestListener();
+    final int paintId = codec.writeFill(buffer, 0xAA000000, 0);
+
+    codec.writeSaveLayer(buffer, paintId);
+    codec.writeRestoreLayer(buffer);
+    codec.decode(buffer.done(), listener);
+
+    expect(listener.commands, [
+      OnPaintObject(
+        color: 0xAA000000,
+        strokeCap: null,
+        strokeJoin: null,
+        blendMode: 0,
+        strokeMiterLimit: null,
+        strokeWidth: null,
+        paintStyle: 0,
+        id: paintId,
+      ),
+      OnSaveLayer(paintId),
+      const OnRestoreLayer(),
+    ]);
+  });
 }
 
 class TestListener extends VectorGraphicsCodecListener {
@@ -197,6 +222,32 @@ class TestListener extends VectorGraphicsCodecListener {
   void onPathStart(int id, int fillType) {
     commands.add(OnPathStart(id, fillType));
   }
+
+  @override
+  void onRestoreLayer() {
+    commands.add(const OnRestoreLayer());
+  }
+
+  @override
+  void onSaveLayer(int id) {
+    commands.add(OnSaveLayer(id));
+  }
+}
+
+class OnSaveLayer {
+  const OnSaveLayer(this.id);
+
+  final int id;
+
+  @override
+  int get hashCode => id.hashCode;
+
+  @override
+  bool operator ==(Object other) => other is OnSaveLayer && other.id == id;
+}
+
+class OnRestoreLayer {
+  const OnRestoreLayer();
 }
 
 class OnDrawPath {

packages/vector_graphics_compiler/lib/src/geometry/path.dart

@@ -315,9 +315,10 @@ class PathBuilder implements PathProxy {
 
   /// Adds a rectangle to the new path.
   void addRect(Rect rect) {
-    lineTo(rect.top, rect.right);
+    moveTo(rect.top, rect.right);
     lineTo(rect.bottom, rect.right);
     lineTo(rect.bottom, rect.left);
+    lineTo(rect.top, rect.left);
     close();
   }
 

packages/vector_graphics_compiler/lib/src/optimizers.dart

@@ -37,6 +37,10 @@ class PaintDeduplicator extends Optimizer {
 
     final Map<Paint, int> paints = <Paint, int>{};
     for (final DrawCommand command in original.commands) {
+      if (command.paintId == -1) {
+        result.commands.add(command);
+        continue;
+      }
       final Paint originalPaint = original.paints[command.paintId];
       final int paintId = paints.putIfAbsent(
         original.paints[command.paintId],

packages/vector_graphics_compiler/lib/src/paint.dart

@@ -61,6 +61,9 @@ class Color {
   /// The blue channel value from 0..255.
   int get b => (0x000000ff & value) >> 0;
 
+  /// The opacity channel value from 0..255.
+  int get a => value >> 24;
+
   @override
   String toString() => 'Color(0x${value.toRadixString(16).padLeft(8, '0')})';
 

packages/vector_graphics_compiler/lib/src/svg/node.dart

@@ -33,14 +33,14 @@ abstract class Node {
   /// the current paint applied as a parent.
   Node adoptPaint(Paint? newPaint);
 
-  /// Calls `addDrawPath` for all paths contained in this subtree with the
-  /// specified `transform` in painting order..
+  /// Calls `build` for all nodes contained in this subtree with the
+  /// specified `transform` in painting order.
   ///
   /// The transform will be multiplied with any transforms present on
   /// [ParentNode]s in the subtree, and applied to any [Path] objects in leaf
   /// nodes in the tree. It may be [AffineMatrix.identity] to indicate that no
   /// additional transformation is needed.
-  void addPaths(DrawCommandConcatentor addDrawPath, AffineMatrix transform);
+  void build(DrawCommandBuilder builder, AffineMatrix transform);
 }
 
 /// A graphics node describing a viewport area, which has a [width] and [height]
@@ -124,10 +124,40 @@ class ParentNode extends Node {
     );
   }
 
+  // Whether or not a save layer should be inserted at this node.
+  bool _requiresSaveLayer() {
+    final Paint? localPaint = paint;
+    if (localPaint == null) {
+      return false;
+    }
+    final Fill? fill = localPaint.fill;
+    if (fill == null) {
+      return false;
+    }
+    if (fill.shader != null) {
+      return true;
+    }
+    if (localPaint.blendMode == null) {
+      return false;
+    }
+    return fill.color == null || fill.color != const Color(0xFF000000);
+  }
+
   @override
-  void addPaths(DrawCommandConcatentor addDrawPath, AffineMatrix transform) {
+  void build(DrawCommandBuilder builder, AffineMatrix transform) {
+    final bool requiresLayer = _requiresSaveLayer();
+    if (requiresLayer) {
+      builder.addSaveLayer(paint!);
+    }
+    final AffineMatrix nextTransform = this.transform == null
+        ? transform
+        : transform.multiplied(this.transform!);
     for (final Node child in children) {
-      child.addPaths(addDrawPath, transform);
+      child.build(builder, nextTransform);
+    }
+
+    if (requiresLayer) {
+      builder.restore();
     }
   }
 }
@@ -170,7 +200,7 @@ class PathNode extends Node {
   }
 
   @override
-  void addPaths(DrawCommandConcatentor addDrawPath, AffineMatrix transform) {
-    addDrawPath(path.transformed(transform), paint!, id);
+  void build(DrawCommandBuilder builder, AffineMatrix transform) {
+    builder.addPath(path.transformed(transform), paint!, id);
   }
 }