Сохранение / создание горячих точек при создании нового изображения

Question

Я разрабатываю плагин для горячих точек для моего клиента, который в бэкэнде может добавить несколько точек доступа к изображению, выбранному из библиотеки.

Я использую этот видео-учебник в качестве основы https://vimeo.com/200502785

Отношение выглядит следующим образом - изображение имеет много горячих точек (отношение один ко многим), горячие точки имеют много продуктов (отношение многие ко многим)

Я использовал код из медиа-поиска, чтобы загрузить изображение в бэкэнд после того, как изображение загружено, пользователь может щелкнуть и добавить точку доступа

jQuery(document).ready(function($) {

   function updateHotspotPosition(hotspot){

      var l = ( 100 * parseFloat(hotspot.position().left / parseFloat(hotspot.parent().width())) ).toFixed(3);
      var t = ( 100 * parseFloat(hotspot.position().top / parseFloat(hotspot.parent().height())) ).toFixed(3);

      hotspot.css("left", l+'%');
      hotspot.css("top", t+'%');

      hotspot.attr('data-request-data', 'left:' + l + ',top:' + t );

   }

   $('#add-hotspot').click(function(e) {
      e.preventDefault();

      $('#hotspot-container').append('<div class="hotspotmarker" data-control="popup" data-handler="onLoadCreateHotspotForm" data-size="large" href="javascript:;" data-request-data="left:0,top:0"></div>');

      $('.hotspotmarker').draggable({
         containment: "#hotspot-container",
         scroll: false,
         stop: function(){
            updateHotspotPosition($(this));
         }
      });

   });


   $('#hotspot-container').on('click', function(e) {
      e.preventDefault();
      if (true) {}
      var parentOffset = $(this).parent().offset();
      //or $(this).offset(); if you really just want the current element's offset
      var l = ( 100 * parseFloat((e.pageX - parentOffset.left) / parseFloat($(this).width())) ).toFixed(3);
      var t = ( 100 * parseFloat((e.pageY- parentOffset.top) / parseFloat($(this).height())) ).toFixed(3);


      $(this).append('<div class="hotspotmarker" data-control="popup" data-handler="onLoadCreateHotspotForm" data-size="large" style="left:'+ l +'%;top:'+ t +'%" data-request-data="left:'+l+',top:'+t+'"></div>')

      $('.hotspotmarker').draggable({
            containment: "#hotspot-container",
            scroll: false,
            stop: function(){
            updateHotspotPosition($(this));
         }
      }).on('click', function(event) {
         event.preventDefault();
         /* Act on the event */
      });;
   });
});

После этого после нажатия на горячую точку открывается модальное окно с переданными данными (слева и сверху) и возможностью выбора продуктов, которые будут назначены горячей точке.

Проблема заключается в создании горячей точки из контроллера изображений, где изображение еще не существует в базе данных

код для контроллера

<?php namespace Depcore\InspiracjeKludi\Controllers;

use Backend\Classes\Controller;
use BackendMenu;

class Images extends Controller
{
    public $implement = [
    'Backend\Behaviors\ListController',
    'Backend\Behaviors\FormController',
    'Backend\Behaviors\ReorderController'
    ];

    public $listConfig = 'config_list.yaml';
    public $formConfig = 'config_form.yaml';
    public $reorderConfig = 'config_reorder.yaml';

    public function __construct()
    {
        parent::__construct();
        BackendMenu::setContext('Depcore.InspiracjeKludi', 'inspiracje', 'side-menu-item');

        $this->itemFormWidget = $this->createProducsFormWidget();
    }

    protected $itemFormWidget;
    /**
     * Create a new hotspot form with products selection
     * @return null
     */
   public function onLoadCreateHotspotForm (  ){


      $this->itemFormWidget->setFormValues ( ['left'=>post ( 'left' ),'top'=>post ( 'top' )] );
      $this->vars['itemFormWidget'] = $this->itemFormWidget;


      return $this->makePartial ( 'hotspot_add');
    }

    protected function createProducsFormWidget (  ){
      $config = $this->makeConfig ( '$/depcore/inspiracjekludi/models/hotspot/fields.yaml' );
      $config->alias = 'productForm';
      $config->arrayName = 'products';
      $config->model = new \Depcore\InspiracjeKludi\Models\Hotspot;
      $widget = $this->makeWidget ( 'Backend\Widgets\Form', $config );
      $widget->bindToController (  );
      return $widget;
    }

    public function onCreateItem (  ) {

      // if  ( $hotspotID !== null ) find and update hotspot position and products relations
      // else {
         $data = $this->itemFormWidget->getSaveData (  );
         $model = new \Depcore\InspiracjeKludi\Models\Hotspot;
         $model->fill ( $data );

         // tutaj dodać defer save
         $model->save (  );
      // }
      return [
         'hotspotId' => $model->id,
      ];
    }


}

В учебном пособии ситуация несколько отличалась, поскольку элементы были добавлены в уже существующий заказ, здесь мне нужно назначить продукты для горячей точки и горячей точки для изображения перед сохранением его в базе данных (также есть логическая проблема, как прикрепите идентификатор горячей точки к элементу на странице после его создания, но это уже другая тема, я думаю).