Apply transforms to more nodes, fix bugs in image transforms (#150)

Author: dnfield

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

@@ -68,46 +68,14 @@ class AffineMatrix {
     );
   }
 
-  /// Create a new [AffineMatrix] with the translation components, if any,
-  /// removed.
-  AffineMatrix removeTranslation() {
-    return AffineMatrix(
-      a,
-      b,
-      c,
-      d,
-      0,
-      0,
-      _m4_10,
-    );
-  }
-
-  /// Return the x, y scale transform as a point if possible.
-  Point? getScale() {
-    if (b == 0.0 && c == 0.0 && _m4_10 == a) {
-      return Point(a, d);
-    }
-    return null;
-  }
-
-  /// Return a new [AffineMatrix] with any scaling removed, if possible.
-  AffineMatrix? removeScale() {
-    if (a == 1.0 && b == 1.0 && _m4_10 == 1.0) {
-      return this;
-    }
-    if (b == 0.0 && c == 0.0 && _m4_10 == a) {
-      return AffineMatrix(
-        1.0,
-        b,
-        c,
-        1.0,
-        e,
-        f,
-        1.0,
-      );
-    }
-    // Non-trivial transform.
-    return null;
+  /// Whether this matrix can be expressed be applied to a rect without any loss
+  /// of inforamtion.
+  ///
+  /// In other words, if this matrix is a simple translate and/or non-negative
+  /// scale with no rotation or skew, this property is true. Otherwise, it is
+  /// false.
+  bool get encodableInRect {
+    return a > 0 && b == 0 && c == 0 && d > 0 && _m4_10 == a;
   }
 
   /// Creates a new affine matrix rotated by `x` and `y`.

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

@@ -4,6 +4,8 @@
 
 import 'dart:typed_data';
 
+import 'package:meta/meta.dart';
+
 import '../geometry/basic_types.dart';
 import '../geometry/matrix.dart';
 import '../geometry/path.dart';
@@ -57,10 +59,30 @@ class _EmptyNode extends Node {
   void visitChildren(NodeCallback visitor) {}
 }
 
+/// A node that contains a transform operation in the tree of graphics
+/// operations.
+abstract class TransformableNode extends Node {
+  /// Constructs a new tree node with [transform].
+  TransformableNode(this.transform);
+
+  /// The descendant child's transform
+  final AffineMatrix transform;
+
+  @override
+  @mustCallSuper
+  AffineMatrix concatTransform(AffineMatrix currentTransform) {
+    if (transform == AffineMatrix.identity) {
+      return currentTransform;
+    }
+    return currentTransform.multiplied(transform);
+  }
+}
+
 /// A node that has attributes in the tree of graphics operations.
-abstract class AttributedNode extends Node {
-  /// Constructs a new tree node with [id] and [paint].
-  AttributedNode(this.attributes);
+abstract class AttributedNode extends TransformableNode {
+  /// Constructs a new tree node with [attributes].
+  AttributedNode(this.attributes, {AffineMatrix? precalculatedTransform})
+      : super(precalculatedTransform ?? attributes.transform);
 
   /// A collection of painting attributes.
   ///
@@ -116,13 +138,9 @@ class ParentNode extends AttributedNode {
   /// Creates a new [ParentNode].
   ParentNode(
     super.attributes, {
-    AffineMatrix? precalculatedTransform,
+    super.precalculatedTransform,
     List<Node>? children,
-  })  : transform = precalculatedTransform ?? attributes.transform,
-        _children = children ?? <Node>[];
-
-  /// The transform to apply to this subtree, if any.
-  final AffineMatrix transform;
+  }) : _children = children ?? <Node>[];
 
   /// The child nodes of this node.
   final List<Node> _children;
@@ -177,14 +195,6 @@ class ParentNode extends AttributedNode {
     _children.add(wrappedChild);
   }
 
-  @override
-  AffineMatrix concatTransform(AffineMatrix currentTransform) {
-    if (transform == AffineMatrix.identity) {
-      return currentTransform;
-    }
-    return currentTransform.multiplied(transform);
-  }
-
   @override
   AttributedNode applyAttributes(SvgAttributes newAttributes) {
     return ParentNode(
@@ -237,15 +247,15 @@ class SaveLayerNode extends ParentNode {
 }
 
 /// A parent node that applies a clip to its children.
-class ClipNode extends Node {
+class ClipNode extends TransformableNode {
   /// Creates a new clip node that applies clip paths to [child].
   ClipNode({
     required this.resolver,
     required this.child,
     required this.clipId,
-    required this.transform,
+    required AffineMatrix transform,
     String? id,
-  });
+  }) : super(transform);
 
   /// Called by visitors to resolve [clipId] to a list of paths.
   final Resolver<List<Path>> resolver;
@@ -260,17 +270,6 @@ class ClipNode extends Node {
   /// The child to clip.
   final Node child;
 
-  /// The descendant child's transform
-  final AffineMatrix transform;
-
-  @override
-  AffineMatrix concatTransform(AffineMatrix currentTransform) {
-    if (transform == AffineMatrix.identity) {
-      return currentTransform;
-    }
-    return currentTransform.multiplied(transform);
-  }
-
   @override
   void visitChildren(NodeCallback visitor) {
     visitor(child);
@@ -283,15 +282,15 @@ class ClipNode extends Node {
 }
 
 /// A parent node that applies a mask to its child.
-class MaskNode extends Node {
+class MaskNode extends TransformableNode {
   /// Creates a new mask node that applies [mask] to [child] using [blendMode].
   MaskNode({
     required this.child,
     required this.maskId,
     this.blendMode,
     required this.resolver,
-    required this.transform,
-  });
+    required AffineMatrix transform,
+  }) : super(transform);
 
   /// The mask to apply.
   final String maskId;
@@ -302,20 +301,9 @@ class MaskNode extends Node {
   /// The blend mode to apply when saving a layer for the mask, if any.
   final BlendMode? blendMode;
 
-  /// The descendant child's transform
-  final AffineMatrix transform;
-
   /// Called by visitors to resolve [maskId] to an [AttributedNode].
   final Resolver<AttributedNode?> resolver;
 
-  @override
-  AffineMatrix concatTransform(AffineMatrix currentTransform) {
-    if (transform == AffineMatrix.identity) {
-      return currentTransform;
-    }
-    return currentTransform.multiplied(transform);
-  }
-
   @override
   void visitChildren(NodeCallback visitor) {
     visitor(child);
@@ -522,35 +510,24 @@ class ImageNode extends AttributedNode {
 }
 
 /// A leaf node in the tree that reprents an patterned-node.
-class PatternNode extends Node {
+class PatternNode extends TransformableNode {
   /// Creates a new pattern node that aaples [pattern] to [child].
   PatternNode({
     required this.child,
     required this.patternId,
     required this.resolver,
-    required this.transform,
-  });
+    required AffineMatrix transform,
+  }) : super(transform);
 
   /// This id will match any path or text element that has a non-null patternId.
   final String patternId;
 
   /// The child(ren) to apply the pattern to.
   final Node child;
 
-  /// The descendant child's transform.
-  final AffineMatrix transform;
-
   /// Called by visitors to resolve [patternId] to an [AttributedNode].
   final Resolver<AttributedNode?> resolver;
 
-  @override
-  AffineMatrix concatTransform(AffineMatrix currentTransform) {
-    if (transform == AffineMatrix.identity) {
-      return currentTransform;
-    }
-    return currentTransform.multiplied(transform);
-  }
-
   @override
   void visitChildren(NodeCallback visitor) {
     visitor(child);

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

@@ -205,6 +205,8 @@ class ResolvingVisitor extends Visitor<Node, AffineMatrix> {
 
   @override
   Node visitImageNode(ImageNode imageNode, AffineMatrix data) {
+    final AffineMatrix childTransform = imageNode.concatTransform(data);
+
     final SvgAttributes attributes = imageNode.attributes;
     final double left = double.parse(attributes.raw['x'] ?? '0');
     final double top = double.parse(attributes.raw['y'] ?? '0');
@@ -220,23 +222,11 @@ class ResolvingVisitor extends Visitor<Node, AffineMatrix> {
 
     // Determine if this image can be drawn without any transforms because
     // it only has an offset and/or scale.
-    final AffineMatrix removedTranslation = data.removeTranslation();
-
-    final Point? scale = removedTranslation.getScale();
-    if (scale == null) {
-      // Non-trivial transform.
-      return ResolvedImageNode(
-        data: imageNode.data,
-        rect: rect,
-        transform: data,
-      );
-    }
-    final AffineMatrix removedScale = removedTranslation.removeScale()!;
-    if (removedScale == AffineMatrix.identity) {
+    if (childTransform.encodableInRect) {
       // trivial transform.
       return ResolvedImageNode(
         data: imageNode.data,
-        rect: data.transformRect(rect),
+        rect: childTransform.transformRect(rect),
         transform: null,
       );
     }
@@ -245,7 +235,7 @@ class ResolvingVisitor extends Visitor<Node, AffineMatrix> {
     return ResolvedImageNode(
       data: imageNode.data,
       rect: rect,
-      transform: data,
+      transform: childTransform,
     );
   }
 

packages/vector_graphics_compiler/test/matrix_test.dart

@@ -125,29 +125,17 @@ void main() {
     expect(matrixA.hashCode != matrixB.hashCode, true);
   });
 
-  test('removeTranslation', () {
-    final AffineMatrix matrixA = AffineMatrix.identity.translated(1, 3);
-    final AffineMatrix matrixB = AffineMatrix.identity.translated(0, 3);
-    final AffineMatrix matrixC =
-        AffineMatrix.identity.translated(1, 3).scaled(10);
-
-    expect(matrixA.removeTranslation(), AffineMatrix.identity);
-    expect(matrixB.removeTranslation(), AffineMatrix.identity);
-    expect(matrixC.removeTranslation(), AffineMatrix.identity.scaled(10));
-    expect(AffineMatrix.identity.removeTranslation(), AffineMatrix.identity);
-  });
-
-  test('removeScale', () {
-    final AffineMatrix matrixA = AffineMatrix.identity.scaled(2);
-    final AffineMatrix matrixB = AffineMatrix.identity.scaled(2, 3);
-    final AffineMatrix matrixC = AffineMatrix.identity.xSkewed(2);
-    final AffineMatrix matrixD = AffineMatrix.identity.ySkewed(2);
-    final AffineMatrix matrixE = AffineMatrix.identity.rotated(math.pi);
-
-    expect(matrixA.removeScale(), AffineMatrix.identity);
-    expect(matrixB.removeScale(), AffineMatrix.identity);
-    expect(matrixC.removeScale(), null);
-    expect(matrixD.removeScale(), null);
-    expect(matrixE.removeScale(), null);
+  test('encodableInRect', () {
+    final AffineMatrix matrixA = AffineMatrix.identity.scaled(2, 3);
+    final AffineMatrix matrixB = AffineMatrix.identity.scaled(2, -2);
+    final AffineMatrix matrixC = AffineMatrix.identity.xSkewed(5);
+    final AffineMatrix matrixD = AffineMatrix.identity.ySkewed(5);
+    final AffineMatrix matrixE = AffineMatrix.identity.rotated(1.3);
+
+    expect(matrixA.encodableInRect, true);
+    expect(matrixB.encodableInRect, false);
+    expect(matrixC.encodableInRect, false);
+    expect(matrixD.encodableInRect, false);
+    expect(matrixE.encodableInRect, false);
   });
 }

packages/vector_graphics_compiler/test/resolver_test.dart

@@ -100,4 +100,21 @@ void main() {
 
     expect(visitCount, 2);
   });
+
+  test('Image transform', () async {
+    final Node node = await parseToNodeTree('''
+<svg width="100" height="100" viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <image xlink:href="data:image/png;base64,iVBO" transform="scale(1 -1) translate(50, -50)" x="0" y="0" width="50" height="50"/>
+</svg>''');
+    final Node resolvedNode =
+        node.accept(ResolvingVisitor(), AffineMatrix.identity);
+    final ResolvedImageNode imageNode =
+        queryChildren<ResolvedImageNode>(resolvedNode).single;
+    expect(
+      imageNode.transform,
+      const AffineMatrix(1.0, 0.0, 0.0, -1.0, 50.0, 50.0),
+    );
+  });
 }