text: import Extension from '../extensions/extension';
  
  let EntryPaint;
  Entry.Painter = class Painter {
      constructor(view) {
          this.view = view;
          this.cache = [];
  
          this.file = {
              id: Entry.generateHash(),
              name: '새그림',
              modified: false,
              mode: 'new', // new or edit
          };
  
          this.dropper = Extension.getExtension('Dropper');
          this.isShow = false;
          this.clipboard = null;
          this._keyboardEvents = [];
          Entry.addEventListener('pictureImport', this.addPicture.bind(this));
          Entry.addEventListener('run', this.detachKeyboardEvents.bind(this));
          Entry.addEventListener('stop', this.attachKeyboardEvents.bind(this));
          this.importEntryPaint();
      }
  
      async importEntryPaint() {
          EntryPaint = window.EntryPaint.default;
          if (this.requestShow) {
              this.initialize();
          }
      }
  
      get graphicsMode() {
          return this.entryPaint.graphicsMode;
      }
  
      initialize() {
          if (this.entryPaint || !EntryPaint) {
              this.requestShow = true;
              return;
          }
  
          this.isShow = true;
  
          this.entryPaint = EntryPaint.create({ parent: this.view, mode: 'entry' });
          this.entryPaint.setDropper && this.entryPaint.setDropper(this.dropper);
  
          this.isImport = true;
          this.entryPaint.on('SNAPSHOT_SAVED', (e) => {
              if (!this.isImport && Entry.stage.selectedObject) {
                  Entry.do('editPicture', e, this.entryPaint);
                  this.file.modified = true;
              }
              this.isImport = false;
          });
          this.entryPaint.on('NEW_PICTURE', this.newPicture.bind(this));
          this.entryPaint.on('IMPORT_IMAGE', () => {
              Entry.dispatchEvent('openPictureImport');
          });
          this.entryPaint.on('SAVE_PICTURE', () => {
              this.fileSave(false);
          });
          this.entryPaint.on('SAVE_NEW_PICTURE', () => {
              this.file.mode = 'new';
              this.fileSave(false);
          });
          this.entryPaint.on('FULL_SCREEN_ON', () => {
              this.toggleFullscreen(true);
          });
          this.entryPaint.on('FULL_SCREEN_OFF', () => {
              this.toggleFullscreen(false);
          });
  
          Entry.addEventListener('pictureSelected', this.changePicture.bind(this));
      }
  
      show() {
          if (!this.isShow) {
              this.initialize();
          }
          this.realign && Entry.windowResized.detach(this.realign);
          this.realign = Entry.windowResized.attach(this.view, this.entryPaint.realign);
      }
  
      hide() {
          this.alertSaveModifiedPicture();
          this.entryPaint && Entry.windowResized.detach(this.realign);
      }
  
      newPicture() {
          const newPicture = {
              dimension: {
                  height: 1,
                  width: 1,
              },
              fileurl: `${Entry.mediaFilePath}_1x1.png`,
              name: Lang.Painter.new_picture,
              imageType: 'png',
          };
  
          newPicture.id = Entry.generateHash();
          if (this.file && this.file.objectId) {
              newPicture.objectId = this.file.objectId;
          }
          Entry.playground.addPicture(newPicture, true);
      }
  
      changePicture(picture = {}, removed) {
          if (this.file && this.file.id === picture.id) {
              if (!this.file.isUpdate) {
                  Entry.stage.updateObject();
                  this.file.isUpdate = true;
              }
              return;
          } else if (!this.file.modified) {
              this.afterModified(picture);
          } else {
              if (this.isConfirm) {
                  return;
              }
  
              this.isConfirm = true;
              let wasRun = false;
              if (Entry.engine.state === 'run') {
                  Entry.engine.toggleStop();
                  wasRun = true;
              }
  
              if (removed) {
                  this.updatePicture(picture);
              } else {
                  this.alertSaveModifiedPicture(picture, wasRun);
              }
          }
          Entry.stage.updateObject();
          this.file.isUpdate = true;
      }
  
      updatePicture(picture = {}, wasRun = true, result = true) {
          this.isConfirm = false;
          result ? this.fileSave(true) : (this.file.modified = false);
          wasRun ? Entry.playground.injectPicture() : this.afterModified(picture);
          Entry.stage.updateObject();
      }
  
      alertSaveModifiedPicture(picture, wasRun) {
          if (!this.file.modified) {
              return;
          }
  
          entrylms.confirm(Lang.Menus.save_modified_shape).then((result) => {
              this.updatePicture(picture, wasRun, result);
          });
      }
  
      afterModified(picture) {
          const file = this.file;
          file.modified = false;
          this.isImport = true;
  
          if (picture.id) {
              file.id = picture.id || Entry.generateHash();
              file.name = picture.name;
              file.mode = 'edit';
              file.objectId = picture.objectId;
  
              this.addPicture(picture, true);
          } else {
              file.id = Entry.generateHash();
              this.entryPaint.reset();
          }
  
          Entry.stateManager.removeAllPictureCommand();
      }
  
      getImageSrc(picture) {
          const { fileurl } = picture || {};
          if (fileurl) {
              return fileurl;
          }
  
          const { imageType = 'png', filename } = picture || {};
          return `${Entry.defaultPath}/uploads/${filename.substring(0, 2)}/${filename.substring(
              2,
              4
          )}/image/${filename}.${imageType}`;
      }
  
      addPicture(picture = {}, isChangeShape) {
          picture.imageType = picture.imageType || 'png';
          const { imageType } = picture;
          const imageSrc = this.getImageSrc(picture);
  
          isChangeShape && (this.isImport = true);
  
          switch (imageType) {
              case 'png':
                  this.entryPaint.addBitmap(imageSrc, {
                      graphicsMode: this.isImport ? this.graphicsMode.BITMAP : '',
                  });
                  break;
              case 'svg':
                  this.entryPaint.addSVG(imageSrc, {
                      graphicsMode: this.isImport ? this.graphicsMode.VECTOR : '',
                  });
                  break;
          }
      }
  
      _getImageType() {
          if (this.entryPaint.mode === this.graphicsMode.VECTOR) {
              return 'svg';
          } else {
              return 'png';
          }
      }
  
      fileSave(taskParam) {
          if (!Entry.stage.selectedObject) {
              return;
          }
          const dataURL = this.entryPaint.getDataURL();
          if (this.entryPaint.mode === this.graphicsMode.VECTOR) {
              this.file.svg = this.entryPaint.exportSVG();
          } else {
              delete this.file.svg;
          }
          this.file.ext = this._getImageType();
          const file = JSON.parse(JSON.stringify(this.file));
          Entry.dispatchEvent('saveCanvasImage', {
              file,
              image: dataURL,
              task: taskParam,
          });
          this.file.isUpdate = false;
          this.file.modified = false;
      }
  
      attachKeyboardEvents() {
          this.detachKeyboardEvents();
  
          const events = this._keyboardEvents;
  
          let evt = Entry.keyPressed;
          evt && events.push(evt.attach(this, this._keyboardPressControl));
  
          evt = Entry.keyUpped;
          evt && events.push(evt.attach(this, this._keyboardUpControl));
      }
  
      detachKeyboardEvents() {
          const events = this._keyboardEvents;
          if (!events || !events.length) {
              return;
          }
  
          while (events.length) {
              const evt = events.pop();
              evt.destroy && evt.destroy();
          }
      }
  
      _keyboardUpControl(e) {}
      _keyboardPressControl(e) {}
  
      toggleFullscreen(isFullscreen) {
          const { pictureView_ } = Entry.playground;
          const $view = $(this.view);
          if ((isFullscreen !== true && $view.hasClass('fullscreen')) || isFullscreen === false) {
              pictureView_.appendChild(this.view);
              $view.removeClass('fullscreen');
              if (this.fullscreenButton) {
                  this.fullscreenButton.setAttribute('title', Lang.Painter.fullscreen);
                  this.fullscreenButton.setAttribute('alt', Lang.Painter.fullscreen);
              }
          } else {
              document.body.appendChild(this.view);
              $view.addClass('fullscreen');
              if (this.fullscreenButton) {
                  this.fullscreenButton.setAttribute('title', Lang.Painter.exit_fullscreen);
                  this.fullscreenButton.setAttribute('alt', Lang.Painter.exit_fullscreen);
              }
          }
          this.entryPaint && this.entryPaint.realign();
      }
  
      clear() {
          this.toggleFullscreen(false);
      }
  
      undo() {
          this.entryPaint.undo();
      }
  
      redo() {
          this.entryPaint.redo();
      }
  };
  