aico-image-editor/src/components/containerModal/containerModal.js

Combine multiple image into and create single combined image

//import Alpine from 'alpinejs';
const loadContainerModalHTML = () => import(/* webpackMode: "eager" */'./containerModal.html');



// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../initStyles';

import initHTML from '../../initHTML';
initHTML('container-modal', loadContainerModalHTML)

import { hotReloadAlpineComponent } from '../../hotReloader';
import { setBubblePosition } from '../../utilities/bubbltPosition';
import infoPopover from '../infoPopover/infoPopover';
import dropdownMenu from '../dropdownMenu/dropdownMenu';


document.addEventListener('alpine:init', function() {
  Alpine.data('infoPopover',infoPopover)
  Alpine.data('dropdownMenu', dropdownMenu);
})


export default () => ({
  init() {
      initStyles(this.$el.shadowRoot);

      if(module.hot) {
        
        module.hot.accept('./containerModal.html', function() {
            console.log('change detected')
            hotReloadAlpineComponent(this.$el.getRootNode().host ,loadContainerModalHTML)
        }.bind(this));
      }
      
     
        
  },    
  containerText: 'this is contaier zxcvxv',
  productBlockVisibleMobile: false,
  imageCombinerModal: {
    ['@imagecombinermodal-shown.window'] ($event) {
      if(!window.__canvas) {
        this.$store.canvas.initFabricCanvas(this.$store.elements.canvasEL, this.$watch, this.$store, this.$dispatch);
        
      } else {
        if(this.$store.canvas.isConfiguratorIdChanged) {
          this.$dispatch('canvas-reset');
          if(this.$store.canvas.configuratorId) {
            this.$store.canvas.restoreCanvasData(window.__canvas).then(() => {
                // all data has been loaded so now it's time to add mainPicture above it
                this.$store.canvas.canvasIsReady();
            }).catch((error) => {
                // in case of unsuccessful restoration also, add mainPicture
                this.$store.canvas.canvasIsReady();
            });
          }
        }

        // if no configuratorId at all then also reset everything
        if(!this.$store.canvas.configuratorId) {
          this.$dispatch('canvas-reset');
          this.$store.canvas.resetCanvasData(window.__canvas);
        }
      }
    }
  },
  sameSizeDropdown: null,
  createSameSizeDropdown(el) {
      if(!this.sameSizeDropdown) {
          if(!window.bootstrap) {
              const Dropdown = require('bootstrap/js/dist/dropdown')
              this.sameSizeDropdown = new Dropdown(el, {
                  reference: "parent"
              });
          } else {
              const Dropdown = require('bootstrap/js/dist/dropdown')
              this.sameSizeDropdown = new Dropdown(el, {
                  reference: "parent"
              });
              // this.sameSizeDropdown = new bootstrap.Dropdown(el, {
              //     reference: "parent"
              // })
          }
          
      }
  },
  toggleSameSizeDropdown() {
    this.sameSizeDropdown?.toggle()   
  },
  setBubblePosition,
  presetImageSize: '2000x2000',
  updateFinalImageDim() {
      // Split the string at 'x'
      const parts = this.presetImageSize.split('x');

      this.$store.canvas.finalImageWidth = parseInt(parts[0]);
      this.$store.canvas.finalImageHeight = parseInt(parts[1]);
  },
  fullscreenMode: false,
  async toggleFullscreenMode($nextTick) {
    this.fullscreenMode = !this.fullscreenMode;
    await $nextTick();
    this.$store.canvas.resizeCanvas(window.__canvas,this.$store.canvas.oldContainerWidth);
  },
  update(newData) {
    Object.assign(this, newData);
  }
})