Position placed text entries for forms and RPG sheets

[saif-ellafi]

Hello folks!
Thanks for the amazing plugin, really top notch thing.

I am planning on having it used in my app, in a way to fulfill RPG character sheets, for example the image below.

So two quick questions arise, would it be possible to change the Text Input editor to an approach where the text appears where you click? Rather than having it written at the center of the screen and everything blurring dark? And second, would it be possible to be able to kind of CTRL+C / CTRL+V quickly or some sort of ALT+DRAG quick copy so we can fill in forms faster?

I know it is a stretch for the tool since these aren't images but hey this works. If you have any pointers in how to go about to achieve it, ideas welcome!

Best,
JeansenVaars

[oscarshaitan]

You could do an overlay UI with gestures detectors and with that add the Text with the add layer _editorKey.currentState!.addLayer(_textLayer); if you calculate you can put the offset to make the text appear close to the place you need

[saif-ellafi]

Giving up, I went through a lot of pain to figure out a way to calculate it. The closest I got is through the callback onEditorZoomScaleUpdate whose details include a focalPoint and a scale multiplier.

Tried to use these to estimate the correct position of the added textLayer in the zoomed/panned coordinates but I could never hit the nail. The math is too complex for me.

I left it on a suboptimal solution using the focalPoint substracted the mouse offset which works okayish, but better than off-the-screen text layers.

[hm21]

When you zoom in or out in the editor, the default InteractiveViewer handles this functionality. I initially thought using the focal point might resolve the issue, but here's some context to consider:

The imageEditor calculates all offsets relative to the center of the image. This means:

• The top-left corner has coordinates x = -w/2 and y = -h/2, where w is the editor-body width and h is the editor-body height.
• The center of the image has coordinates x = 0 and y = 0.

In contrast, the InteractiveViewer might calculate coordinates differently, with x = 0 and y = 0 positioned in the top-left corner. If that's the case, you would need to calculate also that difference.

[saif-ellafi]

Thanks, that helps I think. The challenges I am facing are:
Whenever I click on a zoomed image, there are two things I need in order to position the layer correctly:

1. The zoom in scale (which I can correctly retrieve using the scale multiplier)
2. The focal point at which I am centered. And this here is the problem, I couldn't find a way to correctly figure out where I am relative to the center of the image. The interactive viewer doesn't give much here. The focal point has two problems:
   a. It goes to the infinite with the pan. If you pan to the left, the image hits a limit, but the focal point goes to infinite. So then the last focal point is not in absolute terms at all.
   b. Zoom out coordinates are reversed, if you zoom out, the image moves in the opposite direction when panning, than when zooming in.
   onEditorZoomScaleUpdate is the one bringing these values.

Tldr: I couldn't really figure out how to calculate where am I standing relative to the actual center of the image after panning and zooming, in and out freely. Constraints are also not available, so I don't know how to normalize and limit panning offset coordinates , as they go to the infinity even if the image on screen is no longer moving past its edges.

I will however try again calculating the center of the image and the pan direction to see if I can cap it to image size or something like this. But it is really hard because the zoom out shift gets reversed and the offset are all the way negative from there. Will test.

[hm21]

I understand that calculations with the InteractiveViewer can be very difficult, which was the reason I created a custom solution for the crop-rotate editor to avoid those difficulties. However, after I thought a bit about your problem, I think a possible solution might be to add your click listener directly inside the InteractiveViewer. This way, you can retrieve the correctly transformed coordinates immediately.

To implement this, you would only need to adjust the placement of the listener so that it is inside bodyItemsRecorded instead of bodyItems, as shown in the example below.

configs: ProImageEditorConfigs(
  mainEditorConfigs: const MainEditorConfigs(
    enableZoom: true,
    editorMinScale: 0.6,
    boundaryMargin: EdgeInsets.all(30),
  ),
  customWidgets: ImageEditorCustomWidgets(
    mainEditor: CustomWidgetsMainEditor(
      /// TODO: replace here bodyItems with bodyItemsRecorded
      bodyItemsRecorded: (editor, rebuildStream) {
        return [
          ReactiveCustomWidget(
            stream: rebuildStream,
            builder: (_) => Listener(
              behavior: HitTestBehavior.translucent,
              onPointerDown: (event) {
                Offset position = event.localPosition;
                Size bodySize = editor.sizesManager.bodySize;

                editor.addLayer(
                  TextLayerData(
                    text: 'Test',
                    offset: Offset(
                      position.dx - bodySize.width / 2,
                      position.dy - bodySize.height / 2,
                    ),
                  ),
                );
              },
            ),
          ),
        ];
      },
    ),
  ),
)

[saif-ellafi]

haha madness. Thank you so much. I would have never figured that out, and I am not even sure I want to know what kind of dark magic is going on inside bodyItemsRecorded
That does the job without the need of any fancy math!

[saif-ellafi]

Hi @hm21 -

Correct, I am storing the JSON and history to keep the form dynamic, using the output image only for preview and thumbnail. It is working fine. I don't expect to do any mapping of text to field, is just a visual representation and a convenient way of filling in sheets, no logic behind them, at least not now (perhaps in the future I could give them IDs or whatever).

One challenge that remains, is that I would like the custom widget to spawn a "placeholder text" under the mouse/finger position perhaps, to tap on its final position, rather than placing it and then having to adjust, but this is a minor thing.

For Copy/Paste then this would be similar too, I'd love to have a copy/"paste many" function so paste but keep pasting, so a column of 10 rows can be quickly setup.

Finally: The editing text would also be great to edit in place, rather than in the middle of the screen.

[hm21]

If you prefer generating preview thumbnails in that way, it's a valid approach. However, another option you could try is using StickerLayerData instead of TextLayerData. The StickerLayerData allows you to directly add your own widgets, as demonstrated in this example.

With this approach, you can still include a TextField, enabling you to easily add a placeholder and edit the text. While I haven’t tested this method by myself, I still think it should work.

[saif-ellafi]

oh this is a great idea, will do this for making us of other images the players have in the app already. Will play around the idea of having the TextField as a Sticker.

Customizing the TextField itself it is a mystery to me still, I am looking forward to figure out how could I customize it, like its theme, the customization options, and research if ever the TextField could be written and its text edited in place rather than in the center.