Strokes can have shaders too (#38)

dnfield · web-flow · commit 1e90075ae2ce · 2022-03-29T09:15:50.000-07:00
diff --git a/packages/vector_graphics_codec/lib/vector_graphics_codec.dart b/packages/vector_graphics_codec/lib/vector_graphics_codec.dart
@@ -317,8 +317,9 @@ class VectorGraphicsCodec {
     int strokeJoin,
     int blendMode,
     double strokeMiterLimit,
-    double strokeWidth,
-  ) {
+    double strokeWidth, [
+    int? shaderId,
+  ]) {
     if (buffer._decodePhase.index > _CurrentSection.paints.index) {
       throw StateError('Paints must be encoded together.');
     }
@@ -333,6 +334,7 @@ class VectorGraphicsCodec {
     buffer._putFloat32(strokeMiterLimit);
     buffer._putFloat32(strokeWidth);
     buffer._putUint16(paintId);
+    buffer._putUint16(shaderId ?? kMaxId);
     return paintId;
   }
 
@@ -428,6 +430,7 @@ class VectorGraphicsCodec {
     final double strokeMiterLimit = buffer.getFloat32();
     final double strokeWidth = buffer.getFloat32();
     final int id = buffer.getUint16();
+    final int shaderId = buffer.getUint16();
 
     listener?.onPaintObject(
       color: color,
@@ -438,7 +441,7 @@ class VectorGraphicsCodec {
       strokeWidth: strokeWidth,
       paintStyle: 1, // Stroke
       id: id,
-      shaderId: null,
+      shaderId: shaderId == kMaxId ? null : shaderId,
     );
   }
 
diff --git a/packages/vector_graphics_codec/test/vector_graphics_codec_test.dart b/packages/vector_graphics_codec/test/vector_graphics_codec_test.dart
@@ -91,6 +91,75 @@ void main() {
     ]);
   });
 
+  test('Basic message encode and decode with shaded path', () {
+    final buffer = VectorGraphicsBuffer();
+    final TestListener listener = TestListener();
+    final int shaderId = codec.writeLinearGradient(
+      buffer,
+      fromX: 0,
+      fromY: 0,
+      toX: 1,
+      toY: 1,
+      colors: Int32List.fromList([0, 1]),
+      offsets: Float32List.fromList([0, 1]),
+      tileMode: 1,
+    );
+    final int fillId = codec.writeFill(buffer, 23, 0, shaderId);
+    final int strokeId =
+        codec.writeStroke(buffer, 44, 1, 2, 3, 4.0, 6.0, shaderId);
+    final int pathId = codec.writeStartPath(buffer, 0);
+    codec.writeMoveTo(buffer, 1, 2);
+    codec.writeLineTo(buffer, 2, 3);
+    codec.writeClose(buffer);
+    codec.writeFinishPath(buffer);
+    codec.writeDrawPath(buffer, pathId, fillId);
+    codec.writeDrawPath(buffer, pathId, strokeId);
+
+    codec.decode(buffer.done(), listener);
+
+    expect(listener.commands, [
+      OnLinearGradient(
+        fromX: 0,
+        fromY: 0,
+        toX: 1,
+        toY: 1,
+        colors: Int32List.fromList([0, 1]),
+        offsets: Float32List.fromList([0, 1]),
+        tileMode: 1,
+        id: shaderId,
+      ),
+      OnPaintObject(
+        color: 23,
+        strokeCap: null,
+        strokeJoin: null,
+        blendMode: 0,
+        strokeMiterLimit: null,
+        strokeWidth: null,
+        paintStyle: 0,
+        id: fillId,
+        shaderId: shaderId,
+      ),
+      OnPaintObject(
+        color: 44,
+        strokeCap: 1,
+        strokeJoin: 2,
+        blendMode: 3,
+        strokeMiterLimit: 4.0,
+        strokeWidth: 6.0,
+        paintStyle: 1,
+        id: strokeId,
+        shaderId: shaderId,
+      ),
+      OnPathStart(pathId, 0),
+      const OnPathMoveTo(1, 2),
+      const OnPathLineTo(2, 3),
+      const OnPathClose(),
+      const OnPathFinished(),
+      OnDrawPath(pathId, fillId),
+      OnDrawPath(pathId, strokeId),
+    ]);
+  });
+
   test('Basic message encode and decode with stroked vertex', () {
     final buffer = VectorGraphicsBuffer();
     final TestListener listener = TestListener();
@@ -568,6 +637,19 @@ class OnLinearGradient {
         other.tileMode == tileMode &&
         other.id == id;
   }
+
+  @override
+  String toString() {
+    return 'OnLinearGradient('
+        'fromX: $fromX, '
+        'toX: $toX, '
+        'fromY: $fromY, '
+        'toY: $toY, '
+        'colors: Int32List.fromList($colors), '
+        'offsets: Float32List.fromList($offsets), '
+        'tileMode: $tileMode, '
+        'id: $id)';
+  }
 }
 
 class OnRadialGradient {
diff --git a/packages/vector_graphics_compiler/lib/vector_graphics_compiler.dart b/packages/vector_graphics_compiler/lib/vector_graphics_compiler.dart
@@ -37,6 +37,49 @@ Float64List? _encodeMatrix(AffineMatrix? matrix) {
   return matrix.toMatrix4();
 }
 
+void _encodeShader(
+  Gradient? shader,
+  Map<Gradient, int> shaderIds,
+  VectorGraphicsCodec codec,
+  VectorGraphicsBuffer buffer,
+) {
+  if (shader == null) {
+    return;
+  }
+  int shaderId;
+  if (shader is LinearGradient) {
+    shaderId = codec.writeLinearGradient(
+      buffer,
+      fromX: shader.from.x,
+      fromY: shader.from.y,
+      toX: shader.to.x,
+      toY: shader.to.y,
+      colors: Int32List.fromList(
+          <int>[for (Color color in shader.colors!) color.value]),
+      offsets: Float32List.fromList(shader.offsets!),
+      tileMode: shader.tileMode!.index,
+    );
+  } else if (shader is RadialGradient) {
+    shaderId = codec.writeRadialGradient(
+      buffer,
+      centerX: shader.center.x,
+      centerY: shader.center.y,
+      radius: shader.radius,
+      focalX: shader.focalPoint?.x,
+      focalY: shader.focalPoint?.y,
+      colors: Int32List.fromList(
+          <int>[for (Color color in shader.colors!) color.value]),
+      offsets: Float32List.fromList(shader.offsets!),
+      tileMode: shader.tileMode!.index,
+      transform: _encodeMatrix(shader.transform),
+    );
+  } else {
+    assert(false);
+    throw StateError('illegal shader type: $shader');
+  }
+  shaderIds[shader] = shaderId;
+}
+
 /// Encode an SVG [input] string into a vector_graphics binary format.
 Future<Uint8List> encodeSvg(String input, String filename) async {
   const VectorGraphicsCodec codec = VectorGraphicsCodec();
@@ -50,42 +93,8 @@ Future<Uint8List> encodeSvg(String input, String filename) async {
   final Map<Gradient, int> shaderIds = <Gradient, int>{};
 
   for (final Paint paint in instructions.paints) {
-    final Gradient? shader = paint.fill?.shader;
-    if (shader == null) {
-      continue;
-    }
-    int shaderId;
-    if (shader is LinearGradient) {
-      shaderId = codec.writeLinearGradient(
-        buffer,
-        fromX: shader.from.x,
-        fromY: shader.from.y,
-        toX: shader.to.x,
-        toY: shader.to.y,
-        colors: Int32List.fromList(
-            <int>[for (Color color in shader.colors!) color.value]),
-        offsets: Float32List.fromList(shader.offsets!),
-        tileMode: shader.tileMode!.index,
-      );
-    } else if (shader is RadialGradient) {
-      shaderId = codec.writeRadialGradient(
-        buffer,
-        centerX: shader.center.x,
-        centerY: shader.center.y,
-        radius: shader.radius,
-        focalX: shader.focalPoint?.x,
-        focalY: shader.focalPoint?.y,
-        colors: Int32List.fromList(
-            <int>[for (Color color in shader.colors!) color.value]),
-        offsets: Float32List.fromList(shader.offsets!),
-        tileMode: shader.tileMode!.index,
-        transform: _encodeMatrix(shader.transform),
-      );
-    } else {
-      assert(false);
-      throw StateError('illegal shader type: $shader');
-    }
-    shaderIds[shader] = shaderId;
+    _encodeShader(paint.fill?.shader, shaderIds, codec, buffer);
+    _encodeShader(paint.stroke?.shader, shaderIds, codec, buffer);
   }
 
   int nextPaintId = 0;
@@ -104,6 +113,7 @@ Future<Uint8List> encodeSvg(String input, String filename) async {
       fillIds[nextPaintId] = fillId;
     }
     if (stroke != null) {
+      final int? shaderId = shaderIds[stroke.shader];
       final int strokeId = codec.writeStroke(
         buffer,
         stroke.color?.value ?? 0,
@@ -112,6 +122,7 @@ Future<Uint8List> encodeSvg(String input, String filename) async {
         paint.blendMode?.index ?? 0,
         stroke.miterLimit ?? 4,
         stroke.width ?? 1,
+        shaderId,
       );
       strokeIds[nextPaintId] = strokeId;
     }
diff --git a/packages/vector_graphics_compiler/test/end_to_end_test.dart b/packages/vector_graphics_compiler/test/end_to_end_test.dart
@@ -3,9 +3,21 @@ import 'dart:typed_data';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:vector_graphics/vector_graphics.dart';
+import 'package:vector_graphics_codec/vector_graphics_codec.dart';
 import 'package:vector_graphics_compiler/vector_graphics_compiler.dart';
 
 import 'test_svg_strings.dart';
+import '../../vector_graphics_codec/test/vector_graphics_codec_test.dart'
+    show
+        TestListener,
+        OnSize,
+        OnLinearGradient,
+        OnPaintObject,
+        OnPathStart,
+        OnPathMoveTo,
+        OnPathLineTo,
+        OnPathFinished,
+        OnDrawPath;
 
 class TestBytesLoader extends BytesLoader {
   TestBytesLoader(this.data);
@@ -32,4 +44,54 @@ void main() {
       expect(tester.takeException(), isNull);
     }
   });
+
+  test('encodeSvg encodes stroke shaders', () async {
+    const String svg = '''
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
+  <defs>
+    <linearGradient id="j" x1="69" y1="59" x2="36" y2="84" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffffff" />
+      <stop offset="1" stop-color="#000000" />
+    </linearGradient>
+  </defs>
+  <g>
+    <path d="M34 76h23" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" stroke="url(#j)" />
+  </g>
+</svg>
+''';
+
+    final Uint8List bytes = await encodeSvg(svg, 'test');
+    const VectorGraphicsCodec codec = VectorGraphicsCodec();
+    final TestListener listener = TestListener();
+    codec.decode(bytes.buffer.asByteData(), listener);
+    expect(listener.commands, <Object>[
+      const OnSize(120, 120),
+      OnLinearGradient(
+        id: 0,
+        fromX: 69,
+        fromY: 59,
+        toX: 36,
+        toY: 84,
+        colors: Int32List.fromList(<int>[0xffffffff, 0xff000000]),
+        offsets: Float32List.fromList(<double>[0, 1]),
+        tileMode: 0,
+      ),
+      const OnPaintObject(
+        color: 0xffffffff,
+        strokeCap: 1,
+        strokeJoin: 1,
+        blendMode: 0,
+        strokeMiterLimit: 4.0,
+        strokeWidth: 8,
+        paintStyle: 1,
+        id: 0,
+        shaderId: 0,
+      ),
+      const OnPathStart(0, 0),
+      const OnPathMoveTo(34, 76),
+      const OnPathLineTo(57, 76),
+      const OnPathFinished(),
+      const OnDrawPath(0, 0),
+    ]);
+  });
 }
