Skip to content

feat: Editable Canvas using pro_image_editor package#31

Merged
mariobehling merged 4 commits intofossasia:mainfrom
Vishveshwara:image_editor_2
May 29, 2025
Merged

feat: Editable Canvas using pro_image_editor package#31
mariobehling merged 4 commits intofossasia:mainfrom
Vishveshwara:image_editor_2

Conversation

@Vishveshwara
Copy link
Copy Markdown
Contributor

@Vishveshwara Vishveshwara commented May 6, 2025

fixes #27

Changes

Recording
https://github.com/user-attachments/assets/b2710232-bdb1-4b9a-98ba-0e70db34fa79

Summary by Sourcery

Implement an editable canvas feature using the pro_image_editor package, enabling users to create and manipulate images with multiple editing capabilities

New Features:

  • Add an image editor with support for drawing, adding images, text, emojis, and layers
  • Implement canvas color changing functionality
  • Create a reorderable layer system

Enhancements:

  • Integrate pro_image_editor package for advanced image editing
  • Add image import and editing capabilities
  • Implement undo and redo functionality

@sourcery-ai
Copy link
Copy Markdown
Contributor

sourcery-ai Bot commented May 6, 2025

Reviewer's Guide

This pull request implements an editable canvas feature by integrating the pro_image_editor package. The core functionality resides in the new MovableBackgroundImageExample widget (adapted from the package's examples), launched from the ImageEditor view. This widget configures ProImageEditor to allow drawing, adding images, text, and emojis, along with layer management and canvas background changes. The edited canvas is returned as image data to the ImageLoader provider to update the main displayed image.

File-Level Changes

Change Details Files
Integrated the pro_image_editor package and its dependencies.
  • Added pro_image_editor package to dependencies.
  • Included several supporting packages for features like image picking, file saving, and UI enhancements.
pubspec.yaml
Implemented the editable canvas UI and core logic.
  • Created MovableBackgroundImageExample widget using ProImageEditor.asset.
  • Configured editor features: drawing, image/text/emoji addition, layer management, and canvas background color cycling.
  • Added a bottom navigation bar for editor actions (e.g., add image, paint, text, emoji, change canvas color).
lib/pro_image_editor/features/movable_background_image.dart
Integrated the canvas editor with the existing image display flow.
  • Added an "Open Editor" button in ImageEditor view to launch MovableBackgroundImageExample.
  • Implemented updateImage method in ImageLoader to receive and process the Uint8List output from the canvas editor.
lib/view/image_editor.dart
lib/provider/image_loader.dart
Added various supporting components and utilities for the editor functionality, largely based on pro_image_editor examples.
  • Created an image preview page (PreviewImgPage) to display the edited image with details.
  • Implemented UI for layer reordering (ReorderLayerSheet).
  • Added a helper mixin (ExampleHelperState) for common editor functionalities like navigation and haptic feedback.
lib/pro_image_editor/features/preview/preview_img.dart
lib/pro_image_editor/features/reorder_layer_example.dart
lib/pro_image_editor/core/mixin/example_helper.dart
lib/pro_image_editor/shared/widgets/material_icon_button.dart
lib/pro_image_editor/shared/widgets/pixel_transparent_painter.dart

Assessment against linked issues

Issue Objective Addressed Explanation
#27 Implement a drawing feature.
#27 Implement image editing features.

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Vishveshwara - I've reviewed your changes - here's some feedback:

  • Consider refactoring the editor integration by extracting only essential functionalities from the example files rather than incorporating them wholesale, to tailor it better to the app's needs.
  • Abstract hardcoded values (e.g., canvas dimensions like 240x416, asset paths like 'assets/canvas/...') found within movable_background_image.dart to improve configurability and maintainability.
Here's what I looked at during the review
  • 🟡 General issues: 2 issues found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +44 to +53
TextButton(
onPressed: () async {
final canvasBytes = await Navigator.of(context).push<Uint8List>(
MaterialPageRoute(
builder: (context) => const MovableBackgroundImageExample(),
),
);
imgLoader.updateImage(
bytes: canvasBytes!,
width: epd.width,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Guard against null return from Navigator.push before force unwrapping.

Check for null canvasBytes before calling updateImage instead of force-unwrapping it.

Comment on lines +35 to +40
final decoded = img.decodeImage(bytes);
if (decoded != null) {
final resized = img.copyResize(decoded, width: width, height: height);
image = resized;
notifyListeners();
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Add error handling for image decoding failures.

Log a warning or provide a fallback when decoding returns null to help diagnose failures.

Suggested change
final decoded = img.decodeImage(bytes);
if (decoded != null) {
final resized = img.copyResize(decoded, width: width, height: height);
image = resized;
notifyListeners();
}
final decoded = img.decodeImage(bytes);
if (decoded != null) {
final resized = img.copyResize(decoded, width: width, height: height);
image = resized;
notifyListeners();
} else {
debugPrint("Warning: Failed to decode image from bytes.");
}

@Vishveshwara
Copy link
Copy Markdown
Contributor Author

@AsCress @kienvo can you please give your opinions on using the pro_image_editor package

You can open this link below to find more features we can possibly use.
https://hm21.github.io/pro_image_editor/

@Vishveshwara Vishveshwara changed the title WIP: Editable Canvas using pro_image_editor package feat: Editable Canvas using pro_image_editor package May 29, 2025
@mariobehling mariobehling merged commit 78f46cc into fossasia:main May 29, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Drawing Feature and Image editing features

3 participants