Questions about Layer SubEditor and Offsets

[abalmajd]

Hello, and thanks for this great package!

I have multiple questions.

1. How can I open up SubEditor dialog for Layers other than TextLayer?
I want to be able to edit Widget layers, for example flipping or adding color filters to the layer.
Check the small images with the selection on Layers, Text layer has edit button, Widget layer doesn't.

2. How to customize the SubEditor widgets for any layer to add more custom options?
Check the image with the TextLayer SubEditor.
For example:

• How can I change the display of font families from "Aa" to customised text?
• How can I add or remove buttons from the top?

3. I have programmatically added TextLayers to the corners and center of the screen using offset, but for the top and bottom it is not aligned correctly with the top of the image, how to address this? Is there a way to know the dimensions of the image for use in the offset params? Will it be perfect for shorter or longer images in width/height?

[hm21]

Great to hear you like my package!

1. If you just want to update the buttons, you can simply adjust the children parameter inside the LayerInteractionWidgets.

Example

configs: ProImageEditorConfigs(
  layerInteraction: LayerInteractionConfigs(
    widgets: LayerInteractionWidgets(
      children: [
        (rebuildStream, layer, interactions) => ReactiveWidget(
              stream: rebuildStream,
              builder: (_) => Positioned(
                  top: 0,
                  left: 0,
                  child: Transform.rotate(
                    angle: -layer.rotation,
                    child: MouseRegion(
                      cursor: SystemMouseCursors.click,
                      child: Listener(
                        child: GestureDetector(
                          onTap: interactions.edit,
                          child: Tooltip(
                            message: 'Edit',
                            child: Container(
                              padding: const EdgeInsets.all(3),
                              decoration: BoxDecoration(
                                borderRadius:
                                    BorderRadius.circular(10 * 2),
                                color: Colors.white,
                              ),
                              child: const Icon(
                                Icons.edit,
                                color: Colors.black,
                                size: 10 * 2,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  )),
            ),
        (rebuildStream, layer, interactions) => ReactiveWidget(
              stream: rebuildStream,
              builder: (_) => Positioned(
                top: 0,
                right: 0,
                child: LayerInteractionButton(
                  rotation: -layer.rotation,
                  onTap: interactions.edit,
                  buttonRadius: 10,
                  cursor: SystemMouseCursors.click,
                  icon: Icons.clear,
                  tooltip: 'Remove',
                  color: Colors.black,
                  background: Colors.white,
                ),
              ),
            ),
        (rebuildStream, layer, interactions) => ReactiveWidget(
              stream: rebuildStream,
              builder: (_) => Positioned(
                bottom: 0,
                left: 0,
                child: LayerInteractionButton(
                  rotation: -layer.rotation,
                  onScaleRotateDown: interactions.scaleRotateDown,
                  onScaleRotateUp: interactions.scaleRotateUp,
                  buttonRadius: 10,
                  cursor: SystemMouseCursors.click,
                  icon: Icons.sync,
                  tooltip: 'Rotate and Scale',
                  color: Colors.black,
                  background: Colors.white,
                ),
              ),
            ),
      ],
    ),
  ),
),

2. You need to replace the existing widgets with your own widget. You can follow the example here, which shows you how to do that.
3. In that case, I recommend accessing the sizesManager from the editor, which returns all relevant sizes. In your case, this size is relevant:

final editor = editorKey.currentState!;
final sizeManager = editor.sizesManager;
print(sizeManager.decodedImageSize);

Keep in mind that the editor needs a bit of time to decode the image and calculate all sizes.

FYI: In version 10.0.0, the editor will get a major upgrade for layer selection, as it will then work with overlays. If you're already testing the prerelease 10.0.0-dev.4, I recommend checking out the example here. It also supports new layer selection designs, like using buttons outside the layer.

[abalmagd]

Your answer guided me well and far, thank you.
I have two further questions:

1. Regarding sizesManager, is there an editor callback after which all the editor sizes are calculated? I want to use decodedImageSize, but as you said the editor needs a bit of time to decode the image and calculate all sizes, so the returned size is zero. How to avoid this and await the proper size?

2. I tried to create a custom layer as a subtype of the WidgetLayer, but when inserted into the layers list, it doesn't show up, also no logs indicate an error, what did I miss here? The class I created is below:

Edit: After more testing, this custom layer only appears after updating editor history, still unsure why though

/// Prefill layers, called in `onAfterViewInit` callback.
/// The `bodySize` and `media.resolution` are used to calculate required layer scaling/offset. 
/// I double checked its not the issue by disabling the calculation and setting the offset to (0,0)
/// The `media.layers` list children are all subtype of `Layer`.
void addInitialLayers(GeneratedMedia media) {
    final bodySize = state.currentState!.sizesManager.bodySize;

    final layers = media.layers
        .map((layer) => layer.getLayer(bodySize, media.resolution))
        .toList();

    state.currentState!.stateManager.stateHistory[0].layers.addAll(layers);

    state.currentState!.addHistory();
  }

class SvgLayer extends WidgetLayer {
  SvgLayer({
    required super.widget,
    required this.url,
    this.color,
    super.offset,
    super.rotation,
    super.scale,
    super.id,
    super.flipX,
    super.flipY,
    super.interaction,
    super.isDeleted,
    super.meta,
    super.boxConstraints,
  }) : assert(widget is SvgPicture);

  final String url;
  final Color? color;

  @override
  SvgLayer copyWith({
    Widget? widget,
    String? url,
    Color? color,
    Offset? offset,
    double? rotation,
    double? scale,
    String? id,
    bool? flipX,
    bool? flipY,
    LayerInteraction? interaction,
    WidgetLayerExportConfigs? exportConfigs,
  }) {
    return SvgLayer(
      widget: widget ?? this.widget,
      url: url ?? this.url,
      color: color ?? this.color,
      offset: offset ?? this.offset,
      rotation: rotation ?? this.rotation,
      scale: scale ?? this.scale,
      id: id ?? this.id,
      flipX: flipX ?? this.flipX,
      flipY: flipY ?? this.flipY,
      interaction: interaction ?? this.interaction,
    );
  }
}

[hm21]

1. The latest version of the image editor, 10.2.5, now includes a new callback called onImageDecoded inside the MainEditorCallbacks. This callback may be triggered multiple times, so you'll need to implement logic to ensure it is called only once if necessary.

2. The editor is highly optimized for performance, so when you manually add layers directly to the array, the editor won't rebuild them until it receives the appropriate command. If a history is added, the editor recognizes that as a command and will begin rebuilding the layers. In your case, I recommend adding a layer as shown below:

final editor = editorKey.currentState!;

/// Option 1
for (Layer layer in layers) {
  editor.addLayer(layer);
}

/// Option 2
editor.addHistory(layers: layers);

And if you don't want to create a new state history, you can do it like below. Keep in mind that the editor typically uses internal streams to rebuild, so calling setState can have a higher performance cost compared to the approach above, where the editor only rebuilds the necessary parts.

final editor = editorKey.currentState!;

editor.stateManager.stateHistory[0].layers.addAll(layers);
editor.setState(() {});