[Bug]: Drawings shifting after saving the paint editor

[saif-ellafi]

Package Version

9.3.0

Flutter Version

2.29.2

Platforms

iOS, Windows, Web, macOS, Linux, Android

How to reproduce?

Hello!

After saving the paint editor and going back to the main editor, all paintings are currently shifting.
Any ideas what could be wrong? This must be related to me using custom appBar and bottomBar, so the overall area is as shown, changing.

Question: Could I somehow apply the proper Safe Area size estimation after closing the paint editor? even if the original boundaries don't match? If not, I would need to implement the paint Editor appBar as body items

[hm21]

Hi Saif,

This problem happens in most cases when the bottom bar in the main editor doesn't have the key added to it, which is important for the editor to read the correct size of it and recalculate the layer position correctly. Below is a small example:

mainEditor: MainEditorConfigs(
  widgets: MainEditorWidgets(
    bottomBar: (editor, rebuildStream, key) => ReactiveWidget(
      key: key, // <-- ADD THE KEY HERE
      builder: (_) {
        return Container(
          height: 100,
          color: Colors.amber,
        );
      },
      stream: rebuildStream,
    ),
  ),
),

For the case that that didn't solve the issue by you, I would love it if you could post a minimal example with the configs on the main and paint editor how I can reproduce it.

[saif-ellafi]

Hello @hm21 - yes, I am already passing the key like you showed. Here, hopefully this helps but I don't have an app-agnostic code snippet for reproducing it right away.

In summary: What I have is an appBar and bottomBar that return null, so I can gain the space back. Then, I use bodyItems to have some sort of floating controls. It works fine but there is of course a shift when I run openPaintEditor

                mainEditor: MainEditorConfigs(
                  enableZoom: true,
                  editorMinScale: 1.0,
                  editorMaxScale: maxScale,
                  enableCloseButton: true,
                  style: MainEditorStyle(
                    appBarBackground: PUMCompanion.gameTheme.backgroundColor,
                    appBarColor: PUMCompanion.gameTheme.primaryTextStyle.color ?? Colors.black,
                    background: PUMCompanion.gameTheme.backgroundColor,
                    bottomBarColor: PUMCompanion.gameTheme.primaryTextStyle.color ?? Colors.black,
                    bottomBarBackground: PUMCompanion.gameTheme.backgroundColor,
                  ),
                  widgets: MainEditorWidgets(
                    closeWarningDialog:(editor) async {
                      return true;
                    },
                    bodyItemsRecorded: (editor, rebuildStream) {
                      return [
                        ReactiveWidget(
                          stream: rebuildStream,
                          builder: (_) {
                            return Listener(
                              behavior: HitTestBehavior.translucent,
                              onPointerUp: (event) {
                                if (!isAddingText) return;
                                Offset offset = event.localPosition;
                                addTextLayerAndEdit(editor, offset);
                                isAddingText = false;
                              },
                            );
                          }
                        ),
                        if (isDesktop) ReactiveWidget(
                          stream: rebuildStream,
                          builder: (_) {
                            return KeyboardListener(
                              autofocus: true,
                              focusNode: reactiveFocusNode,
                              child: Container(),
                              onKeyEvent: (event) {
                                ...
                              },
                            );
                          }
                        ),
                        ReactiveWidget(
                          stream: rebuildStream,
                            builder: (_) {
                            return GestureDetector(
                              behavior: HitTestBehavior.translucent,
                              onSecondaryTapDown: (details) {
                                 ...
                              },
                            );
                          },
                        ),
                      ];
                    },
                    bottomBar: !widget.keepAlive ? (editor, rebuildStream, key) {
                      return ReactiveWidget(
                        stream: rebuildStream,
                        key: key,
                        builder: (_) => BottomAppBar(
                          height: kBottomNavigationBarHeight,
                          color: PUMCompanion.gameTheme.backgroundColor,
                          padding: EdgeInsets.zero,
                          child: Center(
                            child: _bottomNavigationBar(
                              editor
                            ),
                          ),
                        ),
                      );
                    } : (editor, rebuildStream, key) {
                      return null;
                    },
                    appBar: !widget.keepAlive ? (editor, rebuildStream) {
                      return ReactiveAppbar(
                        stream: rebuildStream,
                        builder: (_) {
                          // preferredSizeWidget
                          return AppBar(
                            backgroundColor: PUMCompanion.gameTheme.backgroundColor,
                            actions: [
                              Expanded(
                                child: _topNavigationBarActions(editor)
                              )
                            ],
                          );
                        },
                      );
                    } : (editor, rebuildStream) {
                      return null;
                    },
                    bodyItems: !widget.keepAlive ? null : (editor, rebuildStream) {
                      return [
                        ReactiveWidget(
                          stream: rebuildStream,
                          builder: (_) {
                            return Column(
                              // these are appBar and bottomBar placed on top of the image
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                _topNavigationBar(editor),
                                if (!_locked) _bottomNavigationBar(editor),
                              ]
                            );
                          }
                        ),
                      ];
                    },
                  ),

the paint editor itself is the default one:

              IconButton(
                icon: Icon(
                  Icons.edit_rounded,
                  size: 28.0,
                  color: PUMCompanion.gameTheme.primaryTextStyle.color ?? Colors.black,
                ),
                onPressed: editor.openPaintEditor,
                padding: EdgeInsets.zero,
                constraints: BoxConstraints(
                  minHeight: 36.0,
                  minWidth: 36.0,
                ),
                splashRadius: 22.0,
              ),

Best regards

[saif-ellafi]

FYI Alex,

My current workaround is to also implement the custom widgets for the paintEditor in the way that the canvas is of exact same size, both with the same visual appearance and floating bars relying on bodyItems - so all fine :)

This issue would only be a matter of differing canvas sizes

[hm21]

Thanks Saif for the information. I also noticed during my tests that the issue only occurs when the image in one editor fits vertically to the screen. As long as the image only fits horizontally, there is no problem.

The issue seems to be that the editor must convert the layer coordinates from the top-left origin (0,0) to a centered origin after closing the paint editor. However, there are currently some issues in that calculation when the image size changes.

[saif-ellafi]

You're welcome, the issue in itself is not a super big deal, it seems to be a matter of me customizing the main body items and then not synching with other editors.

The underlying issue however, could be bigger than that, therefore I wanted to bring it up.
For example, last week a user had its image editor save a corrupted image size, which shifted all of their elements in their state:

So I was wondering whether this could be a related issue, I could not reproduce it myself, could be a timing issue, resizing of the app/window, saving while minimizing, or any other similar problem that lead to this, and in the background could be related to what we see here perhaps?

Thanks for looking into it, will also keep an eye out

[oscarshaitan]

Thanks Saif for the information. I also noticed during my tests that the issue only occurs when the image in one editor fits vertically to the screen. As long as the image only fits horizontally, there is no problem.

The issue seems to be that the editor must convert the layer coordinates from the top-left origin (0,0) to a centered origin after closing the paint editor. However, there are currently some issues in that calculation when the image size changes.

I have this issuse and as I can debug sofar the issue is the
double get offsetY => _layer.offset.dy + widget.editorCenterY;
in the layer_widget
the widget.editorCenterY is different for the sub editor

Main editor editorCenterY = 426.0

SubEditor editorCenterY = 369.5

the _layer.offset.dy
I made the line like the sub editor

PD: the blue widget at the bottom do not impact I tested without that in the view and same issue

Update:

the differences comes here
main_editor use widget.sizesManager.editorCenterY(widget.selectedLayerIndex)
that is
(editorSize.height - appBarHeight - bottomBarHeight) / 2

and the PaintEditor use the TransformHelper.mainBodySize
and that use the getMinimumSize(mainBodySize, editorBodySize)

so the main editor is missing that min

TransformHelper(
                          mainBodySize:
                              getMinimumSize(mainBodySize, editorBodySize),
                          mainImageSize:
                              getMinimumSize(mainImageSize, editorBodySize),
                          editorBodySize: editorBodySize,
                          transformConfigs: initialTransformConfigs,
                        ),

in my case mainBodySize and editorBodySize are Size(393.0, 739.0)
and the widget.sizesManager.editorCenterY is 852.0

[oscarshaitan]

@hm21 I manage to have a solution but probably need your help to organise the code.
in order to "fix" I did:

• remove all the safe areas in the main and the paint editor (I think will be better to remove all those SafeAreas)
• in MainEditorLayers I mimic the PaintEditor behaviour to get the TransformHelper

check the PR #454

@saif-ellafi check if the branch helps you too please