Convert focal point selector tool into a standalone form element

Here is a first draft of the focal_point form element. I'am pretty sure that this is not ready, but i want to get some feedback to see if i'am on the right track.

It might be an idea to wait until this is committed into dev: https://www.drupal.org/node/2701861

agreed

Just a heads up, Create focal point specific image field widget is committed.

Plugin widget 'image_focal_point' is now available, changing the status accordingly.

It looks like a good time to move onto this task now that #2701861: Create focal point specific image field widget is complete. Having a standalone form would reduce the code in #2701725: Integrate focal point with file entity and entity browser

Been playing with this for a couple days... Hope to have a patch today

Ok ... this is where I am at. The attached patch is not nearly finished. Things that are still problems:

1. It doesn't work...
2. The focal point value is saved, but not displayed on the form properly. This is because "50,50" is hard coded in the focalpoint image widget process function.
3. There may (or may not) be a weird js issue where some bizarre errors show up ... needs more looking into
4. By replacing the preview widget with the focal point element, the focal point value is referred to as "preview" in a lot of places. I think this should be fixed so that we remove the preview value and add the focal point value instead.
5. The focal point value should ultimately work very similar to the "alt" value. It should travel with the image in the same way, but right now it doesn't.
6. As is, this patch breaks the field-widget-based settings for "show preview link" and "default offsets"
7. Focal point is showing up on the node/add form before an image is uploaded
8. Double clicking on the focal point indicator shows the focal point field as it should (YAY!), but it breaks the form a bit (BOOO!)
9. TESTS!

Other than that, this is good to go ;)

Any help on this would be very much appreciated!!

1. It doesn't work...
2. The focal point value is saved, but not displayed on the form properly. This is because "50,50" is hard coded in the focalpoint image widget process function.
3. There may (or may not) be a weird js issue where some bizarre errors show up ... needs more looking into
4. By replacing the preview widget with the focal point element, the focal point value is referred to as "preview" in a lot of places. I think this should be fixed so that we remove the preview value and add the focal point value instead.
5. The focal point value should ultimately work very similar to the "alt" value. It should travel with the image in the same way, but right now it doesn't.
6. As is, this patch breaks the field-widget-based settings for "show preview link" and "default offsets"
7. Focal point is showing up on the node/add form before an image is uploaded
8. Double clicking on the focal point indicator shows the focal point field as it should (YAY!), but it breaks the form a bit (BOOO!)
9. TESTS!

This is definitely closer to how things should be, but still lots left to do:

1. It doesn't work...
2. The focal point value is saved, but not displayed on the form properly. This is because "50,50" is hard coded in the focalpoint image widget process function.
3. There may (or may not) be a weird js issue where some bizarre errors show up ... needs more looking into
4. By replacing the preview widget with the focal point element, the focal point value is referred to as "preview" in a lot of places. I think this should be fixed so that we remove the preview value and add the focal point value instead.
5. The focal point value should ultimately work very similar to the "alt" value. It should travel with the image in the same way, but right now it doesn't.
6. As is, this patch breaks the field-widget-based settings for "show preview link" and "default offsets"
7. Focal point is showing up on the node/add form before an image is uploaded
8. Double clicking on the focal point indicator shows the focal point field as it should (YAY!), but it breaks the form a bit (BOOO!)
9. TESTS!

1. It doesn't work...
2. The focal point value is saved, but not displayed on the form properly. This is because "50,50" is hard coded in the focalpoint image widget process function.
3. There may (or may not) be a weird js issue where some bizarre errors show up ... needs more looking into
4. By replacing the preview widget with the focal point element, the focal point value is referred to as "preview" in a lot of places. I think this should be fixed so that we remove the preview value and add the focal point value instead.
5. The focal point value should ultimately work very similar to the "alt" value. It should travel with the image in the same way, but right now it doesn't.
6. As is, this patch breaks the field-widget-based settings for "show preview link" and "default offsets"
7. Focal point is showing up on the node/add form before an image is uploaded
8. Double clicking on the focal point indicator shows the focal point field as it should (YAY!), but it breaks the form a bit (BOOO!)
9. TESTS!
10. The element is still too coupled with image widget because it expects the preview thumbnail to be passed in ... we should make that optional or just generate the preview thumbnail ourselves.

1. It doesn't work...
2. The focal point value is saved, but not displayed on the form properly. This is because "50,50" is hard coded in the focalpoint image widget process function.
3. There may (or may not) be a weird js issue where some bizarre errors show up ... needs more looking into
4. By replacing the preview widget with the focal point element, the focal point value is referred to as "preview" in a lot of places. I think this should be fixed so that we remove the preview value and add the focal point value instead.
5. The focal point value should ultimately work very similar to the "alt" value. It should travel with the image in the same way, but right now it doesn't.
6. As is, this patch breaks the field-widget-based settings for "show preview link" and "default offsets"
7. Focal point is showing up on the node/add form before an image is uploaded
8. Double clicking on the focal point indicator shows the focal point field as it should (YAY!), but it breaks the form a bit (BOOO!)
9. TESTS!
10. The element is still too coupled with image widget because it expects the preview thumbnail to be passed in ... we should make that optional or just generate the preview thumbnail ourselves.

Nice work @bleen! Keep chipping away :)

1. It doesn't work...
2. The focal point value is saved, but not displayed on the form properly. This is because "50,50" is hard coded in the focalpoint image widget process function.
3. There may (or may not) be a weird js issue where some bizarre errors show up ... needs more looking into
4. By replacing the preview widget with the focal point element, the focal point value is referred to as "preview" in a lot of places. I think this should be fixed so that we remove the preview value and add the focal point value instead.
5. The focal point value should ultimately work very similar to the "alt" value. It should travel with the image in the same way, but right now it doesn't.
6. As is, this patch breaks the field-widget-based settings for "show preview link" and "default offsets"
7. Focal point is showing up on the node/add form before an image is uploaded
8. Double clicking on the focal point indicator shows the focal point field as it should (YAY!), but it breaks the form a bit (BOOO!)
9. TESTS!
10. The element is still too coupled with image widget because it expects the preview thumbnail to be passed in ... we should make that optional or just generate the preview thumbnail ourselves.

Ok ... this is the first patch that I think *might* be ready. I did not add new TESTS since focal point really just needs a bunch of functional tests in general and that shouldn't hold this up any more than any other issue.

That said, this needs a lot of tire kicking. Please test it thoroughly....

Hello,

I reopen this post to know if the latest patch is included in the last version. Can we use Focal Point with the entity browser module?
Focal point module is very useful but actually not functionnal with entity browser.

Thanks.

Holy shit, this was a hell to rebase it. Hopefully, I did not destroy too much...

Patch #17 wasn't applying to the latest dev branch so I've updated it. Would be good to get this merged soon as well.

Attempting a Re-roll of this, as I think I might find it useful.

Can someone explain how one would use this patch to add a focal point image field to a form in code?

$form['image'] = [
  '#type' => 'focal_point',
  '#title' => $this->t('Focal Point Image'),
  '#description' => t("Image Field"),
]

This produces a title and description but no image field.

I'll try to reroll that in a MR

When the field widget is converted into a standalone form element, this also completely changes the code needed to make this module potentially compatible with the SVG image module. Would love to see this merged soon, as this change is a blocker for issue 3122722

can someone please review and mark as RTBC, I have tested this but need second eye/hand.

Tried to apply https://git.drupalcode.org/project/focal_point/-/merge_requests/7.diff with composer at a 2.X version. But it seems composer can't handle the diff as patch...

Applied the diff manual with a git checkout (2.x version). It did apply. I see the deletion of tests/src/Unit/FieldWidgets/FocalPointFieldWidgetTest.php but no replacing tests are added.

I think if the behaviour is changed, a new test is needed. check?

Rebased with 2.x, re-rolled MR !7 and introduce DI in the service class.

Need to work on fixing the test cases.

MR! 7 is ready for a review

Looks good to me, can we have another review on this.

Trying MR #7.

Using media library via file field at a content type seems to go well... But when i'm going to [site]/media/add/image

I get an error:

The website encountered an unexpected error. Please try again later.
AssertionError: Cannot load the "file" entity with NULL ID. in assert() (line 295 of core/lib/Drupal/Core/Entity/EntityStorageBase.php).
assert(, 'Cannot load the "file" entity with NULL ID.') (Line: 295)
Drupal\Core\Entity\EntityStorageBase->load(NULL) (Line: 158)
Drupal\focal_point\FocalPointManager->getFocalPoint(NULL) (Line: 157)
Drupal\focal_point\Plugin\Field\FieldWidget\FocalPointImageWidget::value(Array, , Object)
call_user_func_array(Array, Array) (Line: 1285)
Drupal\Core\Form\FormBuilder->handleInputElement('media_image_add_form', Array, Object) (Line: 1003)
Drupal\Core\Form\FormBuilder->doBuildForm('media_image_add_form', Array, Object) (Line: 1073)
Drupal\Core\Form\FormBuilder->doBuildForm('media_image_add_form', Array, Object) (Line: 1073)
Drupal\Core\Form\FormBuilder->doBuildForm('media_image_add_form', Array, Object) (Line: 1073)
Drupal\Core\Form\FormBuilder->doBuildForm('media_image_add_form', Array, Object) (Line: 577)
Drupal\Core\Form\FormBuilder->processForm('media_image_add_form', Array, Object) (Line: 323)
Drupal\Core\Form\FormBuilder->buildForm(Object, Object) (Line: 73)
Drupal\Core\Controller\FormController->getContentResult(Object, Object) (Line: 39)
Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController->getContentResult(Object, Object)
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 169)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 707)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Beside that I still don't see a replacement for the deletion of tests/src/Unit/FieldWidgets/FocalPointFieldWidgetTest.php. Because there is still a widget right?

Thanks for this quick review,
Will look into this!!

@ankitv18 did you already had some time to tackle #33 ?

Hiding patches because there is a recent Merge Request for this ticket.

Still the problem for [site]/media/add/image is not resolved #33

unassigning this, because there is no response (yet). and others already worked on it.

Tried to debug the latest version and get it working on [site]/media/add/image, but there is still a lot to do.