Replace color with element paint

Author: CodeDoctorDE

api/lib/src/converter/note.dart

@@ -207,5 +207,125 @@ NoteData _migrate(NoteData noteData, FileMetadata metadata) {
       );
     }
   }
+  if (version < 13) {
+    Map<String, dynamic> solidPaint(
+      dynamic color, [
+      int fallback = 0xFF000000,
+    ]) {
+      final value = color is int ? color : fallback;
+      return {'type': 'solid', 'color': value};
+    }
+
+    void updateShapeFill(Map? shape) {
+      if (shape == null) return;
+      if (!const ['circle', 'rectangle', 'triangle'].contains(shape['type'])) {
+        return;
+      }
+      shape['fillPaint'] ??= solidPaint(shape['fillColor'], 0x00000000);
+    }
+
+    void updateProperty(
+      Map? property, {
+      bool hasFill = false,
+      bool hasShape = false,
+    }) {
+      if (property == null) return;
+      property['paint'] ??= solidPaint(property['color']);
+      if (hasFill) {
+        property['fillPaint'] ??= solidPaint(property['fill'], 0x00000000);
+      }
+      if (hasShape) {
+        updateShapeFill(property['shape'] as Map?);
+      }
+    }
+
+    void updateElement(Map? item) {
+      if (item == null) return;
+      final property = item['property'] as Map?;
+      switch (item['type']) {
+        case 'pen':
+          updateProperty(property, hasFill: true);
+        case 'polygon':
+          updateProperty(property, hasFill: true);
+        case 'shape':
+          updateProperty(property, hasShape: true);
+      }
+    }
+
+    void updateTool(Map? item) {
+      if (item == null) return;
+      final property = item['property'] as Map?;
+      switch (item['type']) {
+        case 'pen':
+          updateProperty(property, hasFill: true);
+        case 'polygon':
+          updateProperty(property, hasFill: true);
+        case 'shape':
+          updateProperty(property, hasShape: true);
+      }
+    }
+
+    for (final page in noteData.getAssets('$kPagesArchiveDirectory/')) {
+      final data = noteData.getAsset('$kPagesArchiveDirectory/$page');
+      if (data == null) continue;
+      final pageData = json.decode(utf8.decode(data)) as Map<String, dynamic>;
+      final layers = pageData['layers'] as List?;
+      for (final layer in layers ?? []) {
+        final content = (layer as Map?)?['content'] as List?;
+        for (final item in content ?? []) {
+          updateElement(item as Map?);
+        }
+      }
+      noteData = noteData.setAsset(
+        '$kPagesArchiveDirectory/$page',
+        utf8.encode(json.encode(pageData)),
+      );
+    }
+
+    final info = noteData.getAsset(kInfoArchiveFile);
+    if (info != null) {
+      final infoData = json.decode(utf8.decode(info)) as Map<String, dynamic>;
+      final tools = infoData['tools'] as List?;
+      for (final item in tools ?? []) {
+        updateTool(item as Map?);
+      }
+      noteData = noteData.setAsset(
+        kInfoArchiveFile,
+        utf8.encode(json.encode(infoData)),
+      );
+    }
+
+    for (final component in noteData.getAssets(
+      '$kComponentsArchiveDirectory/',
+    )) {
+      final data = noteData.getAsset('$kComponentsArchiveDirectory/$component');
+      if (data == null) continue;
+      final componentData =
+          json.decode(utf8.decode(data)) as Map<String, dynamic>;
+      final elements = componentData['elements'] as List?;
+      for (final item in elements ?? []) {
+        updateElement(item as Map?);
+      }
+      noteData = noteData.setAsset(
+        '$kComponentsArchiveDirectory/$component',
+        utf8.encode(json.encode(componentData)),
+      );
+    }
+
+    for (final toolbar in noteData.getAssets('$kToolbarsArchiveDirectory/')) {
+      final data = noteData.getAsset('$kToolbarsArchiveDirectory/$toolbar');
+      if (data == null) continue;
+      final toolbarData =
+          json.decode(utf8.decode(data)) as Map<String, dynamic>;
+      final tools = toolbarData['tools'] as List?;
+      for (final item in tools ?? []) {
+        updateTool(item as Map?);
+      }
+      noteData = noteData.setAsset(
+        '$kToolbarsArchiveDirectory/$toolbar',
+        utf8.encode(json.encode(toolbarData)),
+      );
+    }
+  }
   return noteData;
 }

api/lib/src/converter/xopp.dart

@@ -39,7 +39,9 @@ String _exportColor(SRGBColor value) {
       case 'stroke':
         return PenElement(
           property: PenProperty(
-            color: _importColor(element.getAttribute('color')!),
+            paint: ElementPaint.solid(
+              color: _importColor(element.getAttribute('color')!),
+            ),
             strokeWidth: double.parse(
               element.getAttribute('width')!.split(' ').first,
             ),
@@ -187,7 +189,7 @@ Uint8List xoppExporter(NoteData document) {
                       builder.element(
                         'stroke',
                         attributes: {
-                          'color': _exportColor(e.property.color),
+                          'color': _exportColor(e.property.paint.previewColor),
                           'width': e.property.strokeWidth.toString(),
                           'tool': 'pen',
                         },

api/lib/src/models/archive.dart

@@ -12,6 +12,7 @@ const kThumbnailArchiveFile = '$kBflyArchiveDirectory/thumbnail.png';
 const kInfoArchiveFile = '$kBflyArchiveDirectory/info.json';
 const kFontsArchiveDirectory = '$kBflyArchiveDirectory/fonts';
 const kImagesArchiveDirectory = '$kBflyArchiveDirectory/images';
+const kTexturesArchiveDirectory = '$kBflyArchiveDirectory/textures';
 const kPdfArchiveDirectory = '$kBflyArchiveDirectory/pdf';
 const kPacksArchiveDirectory = '$kBflyArchiveDirectory/packs';
 const kPagesArchiveDirectory = '$kBflyArchiveDirectory/pages';

api/lib/src/models/data.dart

@@ -18,6 +18,7 @@ import 'page.dart';
 
 final Set<String> validAssetPaths = {
   kImagesArchiveDirectory,
+  kTexturesArchiveDirectory,
   kPdfArchiveDirectory,
 };
 
@@ -510,6 +511,12 @@ final class NoteData extends NoteDisplay<NoteData> {
   bool containsImage(Uint8List data, String fileExtension) =>
       containsAsset(kImagesArchiveDirectory, data, fileExtension);
 
+  (NoteData, String) importTexture(Uint8List data, String fileExtension) =>
+      importAsset(kTexturesArchiveDirectory, data, fileExtension);
+
+  bool containsTexture(Uint8List data, String fileExtension) =>
+      containsAsset(kTexturesArchiveDirectory, data, fileExtension);
+
   (NoteData, String) importPdf(Uint8List data) =>
       importAsset(kPdfArchiveDirectory, data, 'pdf');
 
@@ -590,6 +597,22 @@ final class NoteData extends NoteDisplay<NoteData> {
   NoteData removeComponent(String name) =>
       removeAsset('$kComponentsArchiveDirectory/$name.json');
 
+  @useResult
+  Iterable<String> getTextures() =>
+      getAssets('$kTexturesArchiveDirectory/', true);
+
+  @useResult
+  Uint8List? getTexture(String textureName) =>
+      getAsset('$kTexturesArchiveDirectory/$textureName');
+
+  @useResult
+  NoteData setTexture(String name, Uint8List texture) =>
+      setAsset('$kTexturesArchiveDirectory/$name', texture);
+
+  @useResult
+  NoteData removeTexture(String name) =>
+      removeAsset('$kTexturesArchiveDirectory/$name');
+
   @useResult
   Iterable<String> getStyles() => getAssets('$kStylesArchiveDirectory/', true);
 

api/lib/src/models/meta.dart

@@ -5,7 +5,7 @@ import '../converter/core.dart';
 part 'meta.freezed.dart';
 part 'meta.g.dart';
 
-const kFileVersion = 12;
+const kFileVersion = 13;
 const kBreakingChangesVersion = 7;
 
 @freezed

api/lib/src/models/property.dart

@@ -20,31 +20,81 @@ enum VerticalAlignment { top, center, bottom }
 
 enum StrokeStyle { solid, dotted }
 
+@freezed
+sealed class ElementPaint with _$ElementPaint {
+  const ElementPaint._();
+
+  const factory ElementPaint.solid({
+    @Default(SRGBColor.black) @ColorJsonConverter() SRGBColor color,
+  }) = SolidElementPaint;
+
+  const factory ElementPaint.texture({
+    required String source,
+    @Default(SRGBColor.white) @ColorJsonConverter() SRGBColor tint,
+    @Default(1) double scale,
+  }) = TextureElementPaint;
+
+  const factory ElementPaint.gradient({
+    @Default(SRGBColor.black) @ColorJsonConverter() SRGBColor start,
+    @Default(SRGBColor.white) @ColorJsonConverter() SRGBColor end,
+    @Default(0) double angle,
+  }) = GradientElementPaint;
+
+  factory ElementPaint.fromJson(Map<String, dynamic> json) =>
+      _$ElementPaintFromJson(json);
+
+  SRGBColor get previewColor => switch (this) {
+    SolidElementPaint(:final color) => color,
+    TextureElementPaint(:final tint) => tint,
+    GradientElementPaint(:final start) => start,
+  };
+
+  ElementPaint withAlpha(int alpha) => switch (this) {
+    SolidElementPaint(:final color) => ElementPaint.solid(
+      color: color.withValues(a: alpha),
+    ),
+    TextureElementPaint(:final source, :final tint, :final scale) =>
+      ElementPaint.texture(
+        source: source,
+        tint: tint.withValues(a: alpha),
+        scale: scale,
+      ),
+    GradientElementPaint(:final start, :final end, :final angle) =>
+      ElementPaint.gradient(
+        start: start.withValues(a: alpha),
+        end: end.withValues(a: alpha),
+        angle: angle,
+      ),
+  };
+}
+
 @freezed
 sealed class Property with _$Property {
   @Implements<PathProperty>()
   const factory Property.pen({
     @Default(5) double strokeWidth,
     @Default(0.4) double thinning,
-    @Default(SRGBColor.black) @ColorJsonConverter() SRGBColor color,
-    @Default(SRGBColor.transparent) @ColorJsonConverter() SRGBColor fill,
+    @Default(ElementPaint.solid()) ElementPaint paint,
+    @Default(ElementPaint.solid(color: SRGBColor.transparent))
+    ElementPaint fillPaint,
     @Default(0.5) double smoothing,
     @Default(0.3) double streamline,
   }) = PenProperty;
 
   const factory Property.shape({
     @Default(5) double strokeWidth,
     required PathShape shape,
-    @Default(SRGBColor.black) @ColorJsonConverter() SRGBColor color,
+    @Default(ElementPaint.solid()) ElementPaint paint,
     @Default(StrokeStyle.solid) StrokeStyle strokeStyle,
     @Default(1.0) double dashMultiplier,
     @Default(1.0) double gapMultiplier,
   }) = ShapeProperty;
 
   const factory Property.polygon({
     @Default(5) double strokeWidth,
-    @Default(SRGBColor.black) @ColorJsonConverter() SRGBColor color,
-    @Default(SRGBColor.transparent) @ColorJsonConverter() SRGBColor fill,
+    @Default(ElementPaint.solid()) ElementPaint paint,
+    @Default(ElementPaint.solid(color: SRGBColor.transparent))
+    ElementPaint fillPaint,
   }) = PolygonProperty;
 
   factory Property.fromJson(Map<String, dynamic> json) =>
@@ -55,18 +105,21 @@ sealed class Property with _$Property {
 sealed class PathShape with _$PathShape {
   const PathShape._();
   const factory PathShape.circle({
-    @Default(SRGBColor.transparent) @ColorJsonConverter() SRGBColor fillColor,
+    @Default(ElementPaint.solid(color: SRGBColor.transparent))
+    ElementPaint fillPaint,
   }) = CircleShape;
   const factory PathShape.rectangle({
-    @Default(SRGBColor.transparent) @ColorJsonConverter() SRGBColor fillColor,
+    @Default(ElementPaint.solid(color: SRGBColor.transparent))
+    ElementPaint fillPaint,
     @Default(0) double topLeftCornerRadius,
     @Default(0) double topRightCornerRadius,
     @Default(0) double bottomLeftCornerRadius,
     @Default(0) double bottomRightCornerRadius,
   }) = RectangleShape;
   const factory PathShape.line() = LineShape;
   const factory PathShape.triangle({
-    @Default(SRGBColor.transparent) @ColorJsonConverter() SRGBColor fillColor,
+    @Default(ElementPaint.solid(color: SRGBColor.transparent))
+    ElementPaint fillPaint,
   }) = TriangleShape;
 
   factory PathShape.fromJson(Map<String, dynamic> json) =>