qms-angular 1.0.68 → 1.0.72

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapcommand.js

@@ -0,0 +1,92 @@
+
+import { Command } from '@ckeditor/ckeditor5-core';
+import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
+import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_ELEMENTS, findMapNodes, drawMap, createInsertedEvent, createRemovedEvent } from './utils';
+import { trimStart } from '../common/qmsCKEditorUtil';
+
+export default class ImageMapCommand extends Command {
+	// refresh() {
+	// 	const element = this.editor.model.document.selection.getSelectedElement();
+	// 	this.isEnabled = isImage(element);
+	// }
+
+	execute(options) {
+		const editor = this.editor;
+		const model = editor.model;
+		model.change(writer => {
+			var newName =  trimStart(options.name, '#');
+			const areas = options.areas;
+			const width = options.imageWidth;
+			const height = options.imageHeight;
+			const imageElement = model.document.selection.getSelectedElement();
+			if(!imageElement | !isImage(imageElement)){
+				return;
+			}
+			const oldName = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP) || options.oldName;
+
+			if(!!oldName){
+				const range = model.createRangeIn(model.document.getRoot());
+				const existingMapElements = findMapNodes([trimStart(oldName, '#')], range);
+				if(existingMapElements && existingMapElements.length > 0){
+					existingMapElements.forEach(element => {
+						writer.remove(element);
+					});
+				}
+			}
+
+			if(!!areas && areas.length > 0)
+			{
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP, '#' + newName, imageElement);
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH, width, imageElement);
+				writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT, height, imageElement);
+
+				let originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC);
+				if(!imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC) || !imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
+					writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
+				}
+				else{
+					originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
+				}
+
+				let attrs = {};
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_NAME] = newName;
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_AREAS] = JSON.stringify(areas);
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_WIDTH] = width;
+				attrs[IMAGEMAP_ATTRIBUTES.MAP_HEIGHT] = height;
+				const mapElement = writer.createElement(IMAGEMAP_ELEMENTS.MAP, attrs);
+
+				writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
+
+				drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
+					model.enqueueChange(writer.batch, writer => {
+						writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC, newsrc, imageElement);
+						this.fire(createInsertedEvent(newName));
+					});
+				});
+			}
+			else {
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP)){
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP, imageElement);
+				}
+
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
+
+					let src = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
+					if(!!src){
+						writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC, src, imageElement);
+					}
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC, imageElement);
+				}
+
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT)){
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT, imageElement);
+				}
+
+				if(imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH)){
+					writer.removeAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH, imageElement);
+				}
+				this.fire(createRemovedEvent(newName));
+			}
+		},{ once: true });
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapdialogcommand.js

@@ -0,0 +1,59 @@
+
+import { Command } from '@ckeditor/ckeditor5-core';
+import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_COMMANDS, parsePixelToFloat, findFirstMapNode } from './utils';
+import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
+import { trimStart } from '../common/qmsCKEditorUtil';
+
+export default class ImageMapDialogCommand extends Command {
+
+	refresh() {
+		const element = this.editor.model.document.selection.getSelectedElement();
+		this.isEnabled = isImage(element);
+	}
+
+	execute() {
+		const editor = this.editor;
+		const model = editor.model;
+		const view = editor.editing.view;
+		const selectedElement = model.document.selection.getSelectedElement();
+
+		const mapName = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP);
+		let originalImageSrc = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC);
+		if(selectedElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC) && selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
+			originalImageSrc = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
+		}
+
+		const data = {'imageUrl': originalImageSrc, 'areas': [], imageWidth: null, imageHeight: null};
+		const imageWidget = getSelectedImageWidget( view.document.selection);
+		const widgetResizePlugin = editor.plugins.get('WidgetResize');
+        const resizer = widgetResizePlugin.getResizerByViewElement( imageWidget );
+
+		if(resizer){
+			const resizerWrapper = resizer._viewResizerWrapper;
+			data.imageWidth = parsePixelToFloat(resizerWrapper.getStyle('width', 0));
+			data.imageHeight = parsePixelToFloat(resizerWrapper.getStyle('height', 0));
+		}
+
+		if(!!mapName){
+			const range = model.createRangeIn(model.document.getRoot());
+			const existingMapElement = findFirstMapNode(trimStart(mapName, '#'), range);
+			if(existingMapElement){
+				data.areas = JSON.parse(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_AREAS) || []);
+			}
+		}
+
+		QMSCKEditorService.imageMapNotify(data);
+        window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = false;
+        window.addEventListener(QMSCKEditorConstant.QMSCK_IMAGEMAP_PLUGIN_RESP, (evt) => {
+            if (window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING]) {
+                return;
+            }
+            window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = true;
+			const options = evt.detail;
+            editor.commands.get(IMAGEMAP_COMMANDS.IMAGEMAP).execute(options);
+        }, { once: true});
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapediting.js

@@ -1,13 +1,15 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import InsertImageMapCommand from './insertimagemapcommand'; 
-import ResizeImageMapCommand from './resizeimagemapcommand'; 
-import { ImageMapAttributes, ImageMapElements, debounced, trimStart, drawMap, ImageMapCommands, HtmlAttributes, HtmlElements, findMapNodes } from './utils';
+import ImageMapCommand from './imagemapcommand';
+import ResizeImageMapCommand from './resizeimagemapcommand';
+import ImageMapDialogCommand from './imagemapdialogcommand';
+import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_ELEMENTS, drawMap, IMAGEMAP_COMMANDS, HTML_ATTRIBUTES, HTML_ELEMENTS, findMapNodes } from './utils';
 import ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
-import { downcastImageWidthAttribute, downcastImageHeightAttribute, downcastImageSavedSrcAttribute, downcastImageMapAttribute, 
-    upcastImageSavedSrcAttribute, upcastMapElement, dowcastMapNameAttribute, dowcastMapWidthAttribute, dowcastMapHeightAttribute, 
+import { downcastImageWidthAttribute, downcastImageHeightAttribute, downcastImageSavedSrcAttribute, downcastImageMapAttribute,
+    upcastImageSavedSrcAttribute, upcastMapElement, dowcastMapNameAttribute, dowcastMapWidthAttribute, dowcastMapHeightAttribute,
     dowcastMapAreaAttribute, upcastImageMapAttribute, upcastImageHeightAttribute, upcastImageWidthAttribute, downcastMapElement
 } from './converters';
 import { isWidget } from  '@ckeditor/ckeditor5-widget/src/utils';
+import { trimStart, debounced } from '../common/qmsCKEditorUtil';
 
  export default class ImageMapEditing extends Plugin {
     static get requires() {
@@ -17,33 +19,33 @@ import { isWidget } from  '@ckeditor/ckeditor5-widget/src/utils';
      static get pluginName() {
          return 'ImageMapEditing';
     }
- 
+
      init() {
         const editor = this.editor;
         const model = editor.model;
         const schema = model.schema;
         const conversion = editor.conversion;
         const editingView = editor.editing.view;
- 
+
         editingView.addObserver(ImageLoadObserver);
 
-        schema.extend(ImageMapElements.IMAGE, { 
-            allowAttributes: [ 
-                ImageMapAttributes.IMAGE_USE_MAP,  
-                ImageMapAttributes.IMAGE_WIDTH,  
-                ImageMapAttributes.IMAGE_HEIGHT, 
-                ImageMapAttributes.IMAGE_SAVED_SRC
-            ] 
+        schema.extend(IMAGEMAP_ELEMENTS.IMAGE, {
+            allowAttributes: [
+                IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP,
+                IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH,
+                IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT,
+                IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC
+            ]
         });
 
-        schema.register(ImageMapElements.MAP, {
+        schema.register(IMAGEMAP_ELEMENTS.MAP, {
             isObject: true,
             allowWhere: '$block',
-            allowAttributes: [ 
-                ImageMapAttributes.MAP_NAME,
-                ImageMapAttributes.MAP_AREAS, 
-                ImageMapAttributes.MAP_WIDTH, 
-                ImageMapAttributes.MAP_HEIGHT
+            allowAttributes: [
+                IMAGEMAP_ATTRIBUTES.MAP_NAME,
+                IMAGEMAP_ATTRIBUTES.MAP_AREAS,
+                IMAGEMAP_ATTRIBUTES.MAP_WIDTH,
+                IMAGEMAP_ATTRIBUTES.MAP_HEIGHT
             ]
        });
 
@@ -51,48 +53,52 @@ import { isWidget } from  '@ckeditor/ckeditor5-widget/src/utils';
         conversion.for('dataDowncast').add(downcastImageHeightAttribute());
         conversion.for('dataDowncast').add(downcastImageSavedSrcAttribute(true));
         conversion.for('editingDowncast').add(downcastImageSavedSrcAttribute(false));
-         
+
         conversion.for('downcast').add(downcastImageMapAttribute());
         conversion.for('downcast').add(downcastMapElement());
- 
+
         conversion.for('downcast')
         .add(dowcastMapNameAttribute())
         .add(dowcastMapWidthAttribute())
         .add(dowcastMapHeightAttribute())
         .add(dowcastMapAreaAttribute());
-       
+
         conversion.for('upcast').add(upcastImageMapAttribute());
         conversion.for('upcast').add(upcastImageHeightAttribute());
         conversion.for('upcast').add(upcastImageWidthAttribute());
         conversion.for('upcast').add(upcastImageSavedSrcAttribute());
         conversion.for('upcast').add(upcastMapElement());
-         
+
         editor.commands.get('resizeImage').on('execute', debounced(() => {
-            editor.execute(ImageMapCommands.RESIZE);
+            editor.execute(IMAGEMAP_COMMANDS.RESIZE_IMAGEMAP);
         }, 100));
 
-        // this.listenTo(editingView.document, 'delete', ( evt, data ) => {
-        //     this.allowDeleteMap = true;
-		// }, {  context: [isWidget]  });
-
-        // this.listenTo(model.document, 'change:data', (event) => {
-        //     if(this.allowDeleteMap == true){
-        //         this.allowDeleteMap == false;
-        //         OnImageDeleted(model, event);
-        //     }
-        // });
-   
+        this.listenTo(editingView.document, 'delete', ( evt, data ) => {
+            this.allowDeleteMap = true;
+		}, { context: [isWidget] });
+
         this.listenTo(editingView.document, 'imageLoaded', (evt, domEvent) => {
             onImageLoaded(domEvent);
         });
- 
-        editor.commands.add(ImageMapCommands.INSERT, new InsertImageMapCommand(editor));
-        editor.commands.add(ImageMapCommands.RESIZE, new ResizeImageMapCommand(editor));
-    } 
-} 
- 
-function OnImageDeleted(model, event){
-    const differ = event.source.differ;
+
+        model.document.on('change:data', (evt, batch) => {
+            if(this.allowDeleteMap == true){
+                this.allowDeleteMap = false;
+                OnImageDeleted(model, batch);
+            }
+        } );
+
+        editor.commands.add(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG, new ImageMapDialogCommand(editor));
+        editor.commands.add(IMAGEMAP_COMMANDS.IMAGEMAP, new ImageMapCommand(editor));
+        editor.commands.add(IMAGEMAP_COMMANDS.RESIZE_IMAGEMAP, new ResizeImageMapCommand(editor));
+    }
+}
+
+function OnImageDeleted(model, batch){
+    if( batch.type == 'transparent'){
+        return;
+    }
+    const differ = model.document.differ;
     // if no difference
     if (differ.isEmpty) { return; }
     const changes = differ.getChanges({ includeChangesInGraveyard: true });
@@ -103,24 +109,24 @@ function OnImageDeleted(model, event){
     for (let i = 0; i < changes.length; i++){
         const change = changes[i]
         // if image remove exists
-        if (change && change.type === 'remove' && change.name === 'image') {
+        if (change && change.type === 'remove' && change.name === IMAGEMAP_ELEMENTS.IMAGE) {
             hasNoImageRemoved = false
             break
         }
     }
-   
+
     // if not image remove stop execution
     if (hasNoImageRemoved) { return; }
     // get removed nodes
-    const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === 'image'))
- 
+    const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === IMAGEMAP_ELEMENTS.IMAGE))
+
     // removed image nodes
     const removedMapNames = []
     removedNodes.forEach(node => {
         let nodeAfter = node.position.nodeAfter;
-        if(nodeAfter && nodeAfter.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
-            let mapname = nodeAfter.getAttribute(ImageMapAttributes.IMAGE_USE_MAP) || '';
-            removedMapNames.push(trimStart(mapname, '#')); 
+        if(nodeAfter && nodeAfter.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP)){
+            let mapname = nodeAfter.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP) || '';
+            removedMapNames.push(trimStart(mapname, '#'));
         }
     });
 
@@ -129,8 +135,7 @@ function OnImageDeleted(model, event){
         const existingMapElements = findMapNodes(removedMapNames, range);
 
         if(existingMapElements && existingMapElements.length > 0){
-            const redoingBatch = model.createBatch( 'transparent' );
-            model.enqueueChange(redoingBatch, writer => {
+            model.enqueueChange(batch, writer => {
                 existingMapElements.forEach(element => {
                     writer.remove(element);
                 });
@@ -144,40 +149,40 @@ function onImageLoaded(domEvent){
     if (!domEvent.target.matches('figure.image.ck-widget > img, figure.image.ck-widget > a > img')) {
         return;
     }
-    if(domEvent.target.hasAttribute(HtmlAttributes.USE_MAP) 
-        && domEvent.target.getAttribute(HtmlAttributes.USE_MAP) 
-        && !domEvent.target.hasAttribute(HtmlAttributes.SAVED_SRC)){
- 
-        const originalSrc =  domEvent.target.getAttribute(HtmlAttributes.SRC);
-        const mapName =  trimStart(domEvent.target.getAttribute(HtmlAttributes.USE_MAP), '#');
-            const selector = `${HtmlElements.MAP}[${HtmlAttributes.NAME}='${mapName}']`;
-            const map = document.querySelector(selector);
-            if(map && map.childNodes){
-                const areas = [];
-                map.childNodes.forEach((child) =>{
-                    if(child.nodeName && child.nodeName.toLowerCase() === HtmlElements.AREA){
-                        let area = {};
-                        area[HtmlAttributes.COORDS] = child.getAttribute(HtmlAttributes.COORDS);
-                        area[HtmlAttributes.SHAPE] = child.getAttribute(HtmlAttributes.SHAPE) || '';
-                        areas.push(area);
-                    }
-                });
-                if(areas.length > 0){
-                    const width =  map.getAttribute(HtmlAttributes.WIDTH) || domEvent.target.width;
-                    const height =  map.getAttribute(HtmlAttributes.HEIGHT) || domEvent.target.height;
-                    const target = domEvent.target;
-                    drawMap(originalSrc, width, height, areas, (oldsrc, newsrc) => {
-                        if(target){
-                            target.setAttribute(HtmlAttributes.SRC, newsrc);
-                            target.setAttribute(HtmlAttributes.SAVED_SRC, oldsrc);
-                        }
-
-                        if(map){
-                            map.setAttribute(HtmlAttributes.WIDTH, width);
-                            map.setAttribute(HtmlAttributes.HEIGHT, height);
-                        } 
-                    })
+    if(domEvent.target.hasAttribute(HTML_ATTRIBUTES.USE_MAP)
+        && domEvent.target.getAttribute(HTML_ATTRIBUTES.USE_MAP)
+        && !domEvent.target.hasAttribute(HTML_ATTRIBUTES.SAVED_SRC)){
+
+        const originalSrc =  domEvent.target.getAttribute(HTML_ATTRIBUTES.SRC);
+        const mapName =  trimStart(domEvent.target.getAttribute(HTML_ATTRIBUTES.USE_MAP), '#');
+        const selector = `${HTML_ELEMENTS.MAP}[${HTML_ATTRIBUTES.NAME}='${mapName}']`;
+        const map = document.querySelector(selector);
+        if(map && map.childNodes){
+            const areas = [];
+            map.childNodes.forEach((child) =>{
+                if(child.nodeName && child.nodeName.toLowerCase() === HTML_ELEMENTS.AREA){
+                    let area = {};
+                    area[HTML_ATTRIBUTES.COORDS] = child.getAttribute(HTML_ATTRIBUTES.COORDS);
+                    area[HTML_ATTRIBUTES.SHAPE] = child.getAttribute(HTML_ATTRIBUTES.SHAPE) || '';
+                    areas.push(area);
                 }
+            });
+            if(areas.length > 0){
+                const width =  map.getAttribute(HTML_ATTRIBUTES.WIDTH) || domEvent.target.width;
+                const height =  map.getAttribute(HTML_ATTRIBUTES.HEIGHT) || domEvent.target.height;
+                const target = domEvent.target;
+                drawMap(originalSrc, width, height, areas, (oldsrc, newsrc) => {
+                    if(target){
+                        target.setAttribute(HTML_ATTRIBUTES.SRC, newsrc);
+                        target.setAttribute(HTML_ATTRIBUTES.SAVED_SRC, oldsrc);
+                    }
+
+                    if(map){
+                        map.setAttribute(HTML_ATTRIBUTES.WIDTH, width);
+                        map.setAttribute(HTML_ATTRIBUTES.HEIGHT, height);
+                    }
+                })
             }
+        }
     }
-}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapui.js

@@ -1,49 +1,48 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { ButtonView, ContextualBalloon } from '@ckeditor/ckeditor5-ui';
 import imageMapIcon from '../../themes/icons/imagemap.svg';
-import { ImageMapCommands } from './utils';
+import { IMAGEMAP_COMMANDS } from './utils';
 
  export default class ImageMapUI extends Plugin {
-   
+
      static get requires() {
          return [ ContextualBalloon];
      }
-  
+
      static get pluginName() {
          return 'ImageMapUI';
      }
-  
+
      init() {
         this._createButton();
 
      }
-  
+
      destroy() {
         super.destroy();
      }
-  
+
      _createButton() {
          const editor = this.editor;
          const t = editor.t;
- 
+
          editor.ui.componentFactory.add('imageMap', locale => {
-             const command = editor.commands.get(ImageMapCommands.INSERT);
+             const command = editor.commands.get(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG);
              const view = new ButtonView(locale);
- 
+
              view.set({
                  label: t('Image Map'),
                  icon: imageMapIcon,
                  tooltip: true
              });
- 
+
              view.bind('isEnabled').to(command, 'isEnabled');
- 
+
              this.listenTo(view, 'execute', () => {
-                editor.execute(ImageMapCommands.INSERT, {});
+                editor.execute(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG);
              });
- 
+
              return view;
          });
      }
  }
- 

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/resizeimagemapcommand.js

@@ -1,22 +1,23 @@
 
 import { Command } from '@ckeditor/ckeditor5-core';
 import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
-import { ImageMapAttributes, trimStart, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight } from './utils';
+import { IMAGEMAP_ATTRIBUTES, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight, createResizedEvent } from './utils';
 import  { getSelectedImageWidget} from '@ckeditor/ckeditor5-image/src/image/utils';
+import { trimStart } from '../common/qmsCKEditorUtil';
 
 export default class ResizeImageMapCommand extends Command {
-	 
+
 	refresh() {
 		const element = this.editor.model.document.selection.getSelectedElement();
-		this.isEnabled = isImage(element) && element.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP);
+		this.isEnabled = isImage(element) && element.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP);
 	}
- 
-	execute() {
+
+	execute( options = {}) {
         const editor = this.editor;
         const model = editor.model;
         const view = this.editor.editing.view;
         const imageElement = model.document.selection.getSelectedElement();
-        const mapName = imageElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
+        const mapName = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP);
         if(mapName){
             const imageWidget = getSelectedImageWidget( view.document.selection);
             const widgetResizePlugin = editor.plugins.get('WidgetResize');
@@ -25,14 +26,14 @@ export default class ResizeImageMapCommand extends Command {
                 const resizerWrapper = resizer._viewResizerWrapper;
                 const newWidth = parsePixelToFloat(resizerWrapper.getStyle('width', 0));
                 const newHeight = parsePixelToFloat(resizerWrapper.getStyle('height', 0));
- 
+
                 const range = model.createRangeIn(model.document.getRoot());
                 const existingMapElement = findFirstMapNode(trimStart(mapName, '#'), range);
                 if(existingMapElement){
-                    const areas = JSON.parse(existingMapElement.getAttribute(ImageMapAttributes.MAP_AREAS) || []);
-                    const width = parsePixelToFloat(existingMapElement.getAttribute(ImageMapAttributes.MAP_WIDTH, 0));
-                    const height = parsePixelToFloat(existingMapElement.getAttribute(ImageMapAttributes.MAP_HEIGHT, 0));
-                   
+                    const areas = JSON.parse(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_AREAS) || []);
+                    const width = parsePixelToFloat(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_WIDTH, 0));
+                    const height = parsePixelToFloat(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_HEIGHT, 0));
+
                     const widthChanged = newWidth != width && width != 0 ;
                     const heightChanged = newHeight != height && height != 0 ;
 
@@ -53,23 +54,24 @@ export default class ResizeImageMapCommand extends Command {
 
                         const areasAsString  = JSON.stringify(areas);
                         model.change(writer => {
-                            let originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
-                            if(!imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) || !imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-                                writer.setAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
+                            let originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC);
+                            if(!imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC) || !imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
+                                writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
                             }
                             else{
-                                originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+                                originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
                             }
 
-                            writer.setAttribute(ImageMapAttributes.MAP_AREAS, areasAsString, existingMapElement);
-                            writer.setAttribute(ImageMapAttributes.MAP_WIDTH, newWidth, existingMapElement);
-                            writer.setAttribute(ImageMapAttributes.MAP_HEIGHT, newHeight, existingMapElement);
-                            writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, newWidth, imageElement);
-                            writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, newHeight, imageElement);
+                            writer.setAttribute(IMAGEMAP_ATTRIBUTES.MAP_AREAS, areasAsString, existingMapElement);
+                            writer.setAttribute(IMAGEMAP_ATTRIBUTES.MAP_WIDTH, newWidth, existingMapElement);
+                            writer.setAttribute(IMAGEMAP_ATTRIBUTES.MAP_HEIGHT, newHeight, existingMapElement);
+                            writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH, newWidth, imageElement);
+                            writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT, newHeight, imageElement);
 
                             drawMap(originalImageSrc, newWidth, newHeight, areas, (oldsrc, newsrc) =>{
-                                model.enqueueChange(writer => {
-                                    writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+                                model.enqueueChange(writer.batch, writer => {
+                                    writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC, newsrc, imageElement);
+                                    this.fire(createResizedEvent(mapName));
                                 });
                             });
                         });
@@ -77,6 +79,5 @@ export default class ResizeImageMapCommand extends Command {
                 }
             }
         }
-	} 
+	}
 }
-