aico-image-editor/src/index.js

Combine multiple image into and create single combined image

//import Alpine from 'alpinejs';
//window.Alpine = Alpine;

// import component from 'alpinejs-component';
// Alpine.plugin(component)



//import path from 'path';

//import { productPictures as pictures } from './getImages.js';





import './public-path';

import main from './components/main/main';




import containerModal from './components/containerModal/containerModal';


import configuratorComponent from './components/configuratorComponent/configuratorComponent';



import configurator2d from './components/configurator2d/configurator2d';



import configurator3d from './components/configurator3d/configurator3d';


///tabs
import configuratorTabs from './components/configuratorTabs/configuratorTabs';


import configuratorTabsMobile from './components/configuratorTabsMobile/configuratorTabsMobile';



import pictureTab, {productPicturesSubTab} from './components/pictureTab/pictureTab';


import ownShapeTab from './components/ownShapeTab/ownShapeTab';


import labellingTab from './components/labellingTab/labellingTab';


import layeringTab from './components/layeringTab/layeringTab';


import aiModal from './components/aiModal/aiModal';


import layerThumbnail from './components/layerThumbnail/layerThumbnail.js';



import canvasControls from './components/canvasControls/canvasControls';


import deleteConfirmModal from './components/deleteConfirmModal/deleteConfirmModal';


function defineData() {
  
  require('./data/tooltip');
  require('./fabricstore');
  require('./localization');
  require('./data/dragdrop.js');
  
  require('./elementstore');
  require('./modalstore')
  require('./bgshapecroppermodalstore')
  require('./shapecroppermodalstore')
  require('./picturecroppermodalstore')

  Alpine.data('main', main)
  Alpine.data('containerModal', containerModal)
  Alpine.data('configurator', configuratorComponent);
  Alpine.data('configurator2d',configurator2d);
  Alpine.data('configurator3d',configurator3d)
  Alpine.data('configuratorTabs',configuratorTabs);
  Alpine.data('configuratorTabsMobile',configuratorTabsMobile);
  Alpine.data('pictureTab', pictureTab);
  Alpine.data('ownShapeTab', ownShapeTab)
  Alpine.data('labellingTab',labellingTab)
  Alpine.data('layeringTab',layeringTab)
  Alpine.data('aiModal', aiModal)
  Alpine.data('layerThumbnail',layerThumbnail)
  Alpine.data('canvasControls', canvasControls);
  Alpine.data('deleteConfirmModal', deleteConfirmModal);
}

// defineData();


document.addEventListener('alpine:init', defineData)


export function updateEditorConfig($store, apiConfig) {
  $store.canvas.apiConfig = apiConfig;

  $store.canvas.currentLocale = apiConfig.locale.substr(0,2) === 'en' ? 'en' : 'de';

  // as this gets automatically triggered for parent app, it is only needed for local development
  //window.dispatchEvent(new CustomEvent('language-updated', { detail: { currentLanguage: { locale:  $store.canvas.currentLocale}}}))

  $store.canvas.configuratorId = apiConfig.configuratorId;
  $store.canvas.productId = apiConfig.productId;

  $store.modal.openModal($store.elements.containerModalEL);
}


export function prepareEditorHTML(el) {  
    const buttonHTML =  `
    <div x-data="localization">
      <button type="button" class="btn bg-gray-light p-1 d-flex rounded-0" >
        <span class="position-relative lh-1" x-data="tooltip" :title="getTranslatedHTML('imageCombinerText')" >
          <i class="far fa-image fa-lg"></i>
          <div class="position-absolute image-edit-icon">
            <i class="fas fa-pencil-alt text-primary fa-xs"></i>
          </div>
        </span>
      </button>
    </div>`;
    el.insertAdjacentHTML('beforeend', buttonHTML);
    Alpine.initTree(el.firstElementChild);
    const editorHTML = `
      <div>
        <main-component datatemplateurl="main/main.html"  styles="global" shadow="true"></main-component>
      </div>
    `;
    if(!document.querySelector('main-component')) {
      document.body.insertAdjacentHTML('beforeend', editorHTML);
      
    }

   
}


export {productPicturesSubTab as productPicturesData};

//export const productPictures = pictures;