qms-angular 1.0.56 → 1.0.57

package/src/assets/qms-ckeditor-plugin/package.json

@@ -54,6 +54,7 @@
     "@ckeditor/ckeditor5-clipboard": "27.1.0",
     "@wiris/mathtype-ckeditor5": "^7.27.0",
     "@ckeditor/ckeditor5-page-break": "^27.1.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^27.1.0",
     "qms-angular": "^1.0.2"
   }
 }

package/src/assets/qms-ckeditor-plugin/src/ckeditor.js

@@ -25,6 +25,9 @@ import List from '@ckeditor/ckeditor5-list/src/list.js';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
 import Table from '@ckeditor/ckeditor5-table/src/table.js';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties.js';
+import TableSelection from '@ckeditor/ckeditor5-table/src/tableselection.js';
 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
 import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
 import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
@@ -56,12 +59,15 @@ import SpecialCharactersMathematical from './plugins/ckeditor5-special-character
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import FindAndReplace from './plugins/ckeditor5-find-and-replace/src/findandreplace.js';
 import Tooltip from './plugins/tooltip/tooltip.js';
-import QMSCKEditorBpmnPlugin from './plugins/bpmn/qmsCKEditorBpmnPlugin.js';
 import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
 import ImageMap from './plugins/imagemap/imagemap.js';
 import Indent from '@ckeditor/ckeditor5-indent/src/indent';
 import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import AboutCKEditor from './plugins/aboutckeditor/aboutckeditor.js';
+import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
 import ToggleToolbar from './plugins/toggletoolbar/toggletoolbar.js';
+import QMSCKEditorBpmnPlugin from './plugins/bpmn/qmsCKEditorBpmnPlugin.js';
+import QMSCKEditorFlowchartPlugin from './plugins/flowchart/qmsCKEditorFlowchartPlugin.js';
 
 class Editor extends ClassicEditor {}
 
@@ -95,6 +101,9 @@ Editor.builtinPlugins = [
 	Paragraph,
 	Table,
 	TableToolbar,
+  TableProperties,
+  TableCellProperties,
+  TableSelection,
 	TextTransformation,
 	QMSCKEditorFullscreenPlugin,
 	QMSCKEditorTemplatePlugin,
@@ -118,11 +127,21 @@ Editor.builtinPlugins = [
 	SpecialCharactersMathematical,
 	Clipboard,
 	PasteFromOffice,
-  	Tooltip,
+	Tooltip,
 	FindAndReplace,
 	PageBreak,
 	ImageMap,
-  	QMSCKEditorBpmnPlugin,
+	QMSCKEditorBpmnPlugin,
+	PageBreak,
+	Indent,
+	IndentBlock,
+	AboutCKEditor,
+	PageBreak,
+	Indent,
+	IndentBlock,
+	HorizontalLine,
+  QMSCKEditorBpmnPlugin,
+  QMSCKEditorFlowchartPlugin,
 	PageBreak,
 	Indent,
 	IndentBlock,

package/src/assets/qms-ckeditor-plugin/src/plugins/aboutckeditor/aboutckeditor.js

@@ -0,0 +1,28 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import informationIcon from '../../themes/icons/information.svg';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import { version } from '@ckeditor/ckeditor5-utils';
+
+export default class AboutCKEditor extends Plugin {
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        editor.ui.componentFactory.add('aboutCKEditor', locale => {
+            const buttonView = new ButtonView( locale );
+
+            buttonView.set( {
+                label: t('About CKEditor'),
+                icon: informationIcon,
+                withText: false,
+                tooltip: true
+            } );
+
+            buttonView.on('execute', () => {
+                QMSCKEditorService.aboutCKEditorNotify(version);
+            });
+
+            return buttonView;
+        } );
+    }
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/bpmn/qmsCKEditorBpmnPlugin.js

@@ -3,7 +3,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import BpmnIcon from '../../themes/icons/bpmn.svg';
 import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
 import * as QMSCKEditorService from '../common/qmsCKEditorService';
-
+import { ImageMapCommands, createInsertedEvent, debounced } from '../imagemap/utils';
 export default class QMSCKEditorBpmnPlugin extends Plugin {
     init() {
         const editor = this.editor;
@@ -29,21 +29,40 @@ export default class QMSCKEditorBpmnPlugin extends Plugin {
               else {
                 QMSCKEditorService.bpmnNotify('');
               }
+              window[QMSCKEditorConstant.QMSCK_BPMN_IS_PROCESSING] = false;
               window.addEventListener(QMSCKEditorConstant.QMSCK_BPMN_PLUGIN_RESP, function (evt) {
+                if (window[QMSCKEditorConstant.QMSCK_BPMN_IS_PROCESSING]) {
+                    return;
+                }
+                window[QMSCKEditorConstant.QMSCK_BPMN_IS_PROCESSING] = true;
                 editor.model.change( writer => {
+                    const imagemap = evt.detail.imagemap || {};
                     const imageElement = writer.createElement( 'image', {
                         src: evt.detail.values,
                         alt: evt.detail.key
-                    } );
+                    });
                     // Insert the image in the current selection location.
                     editor.model.insertContent( imageElement, editor.model.document.selection );
-                } );
+                    const insertImageMapCommand = editor.commands.get(ImageMapCommands.INSERT);
+                    const resizeImageMapCommand = editor.commands.get(ImageMapCommands.RESIZE);
+                    if(!!imagemap.areas && imagemap.areas.length > 0 && !!insertImageMapCommand){
+                        editor.model.createSelection(imageElement, "in");//Set the current selection in the inserted image
+                        imagemap.oldName = imagemap.name;//Delete old image map if any
+                        insertImageMapCommand.execute(imagemap);
+                        //resize image map when image width is greater than 600px
+                        if(imagemap.imageWidth > 600 && !!resizeImageMapCommand){
+                          insertImageMapCommand.once(createInsertedEvent(imagemap.name), debounced(() => {
+                              resizeImageMapCommand.execute();
+                          }, 500));
+                        }
+                    }
+                });
+
               },
               { once: true });
             });
-
             return view;
-        })
+        });
     }
 
     isBpmnImage( element, image ) {

package/src/assets/qms-ckeditor-plugin/src/plugins/common/qmsCKEditorConstant.js

@@ -21,6 +21,12 @@ export const QMSCK_IMAGEMAP_IS_PROCESSING = 'QMSCK_IMAGEMAP_IS_PROCESSING';
 export const QMSCK_BPMN_PLUGIN_MSG = 'QMSCK_BPMN_PLUGIN_MSG';
 export const QMSCK_BPMN_PLUGIN_RESP = 'QMSCK_BPMN_PLUGIN_RESP';
 export const QMSCK_BPMN = 'bpmn';
+/* About CKEditor */
+export const QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG = 'QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG';
+export const QMSCK_BPMN_IS_PROCESSING = 'QMSCK_BPMN_IS_PROCESSING';
+/* Flowchart */
+export const QMSCK_FLOWCHART_PLUGIN_MSG = 'QMSCK_FLOWCHART_PLUGIN_MSG';
+export const QMSCK_FLOWCHART_PLUGIN_RESP = 'QMSCK_FLOWCHART_PLUGIN_RESP';
+export const QMSCK_FLOWCHART = 'flowchart';
 /* Toolbar Toggle */
 export const QMSCK_TOGGLE_TOOLBAR_MSG = 'QMSCK_TOGGLE_TOOLBAR_MSG';
- 

package/src/assets/qms-ckeditor-plugin/src/plugins/common/qmsCKEditorService.js

@@ -79,3 +79,23 @@ export function bpmnNotify(value) {
       '*'
   );
 }
+
+export function aboutCKEditorNotify(value) {
+    window.postMessage(
+        {
+            eventName: constant.QMSCK_ABOUT_CKEDITOR_PLUGIN_MSG,
+            value
+        },
+        '*'
+    );
+}
+
+export function flowchartNotify(value) {
+  window.postMessage(
+      {
+          eventName: constant.QMSCK_FLOWCHART_PLUGIN_MSG,
+          value
+      },
+      '*'
+  );
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/flowchart/qmsCKEditorFlowchartPlugin.js

@@ -0,0 +1,63 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import FlowchartIcon from '../../themes/icons/flowchart.svg';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+
+export default class QMSCKEditorFlowchartPlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+
+        editor.ui.componentFactory.add('qmsFlowchart', locale => {
+            const view = new ButtonView(locale);
+
+            view.set({
+                label: 'Flowchart',
+                icon: FlowchartIcon,
+                tooltip: true
+            });
+
+            view.on('execute', () => {
+              const isFlowchart = this.isFlowchartImage(editor.editing.view.document.selection.getSelectedElement(), editor.plugins.get('Image'))
+              if (isFlowchart) {
+                const parentElement = editor.editing.view.document.selection.getSelectedElement();
+                const altAtr = parentElement.getChild(0).getAttribute('alt');
+                const arrAtr = altAtr.split("#");
+                const id = arrAtr[1];
+                QMSCKEditorService.flowchartNotify(id);
+              }
+              else {
+                QMSCKEditorService.flowchartNotify('');
+              }
+              window.addEventListener(QMSCKEditorConstant.QMSCK_FLOWCHART_PLUGIN_RESP, function (evt) {
+                editor.model.change( writer => {
+                    const imageElement = writer.createElement( 'image', {
+                        src: evt.detail.values,
+                        alt: evt.detail.key
+                    } );
+                    // Insert the image in the current selection location.
+                    editor.model.insertContent( imageElement, editor.model.document.selection );
+                } );
+              },{ once: true });
+            });
+
+            return view;
+        })
+    }
+
+    isFlowchartImage( element, image ) {
+      const isImage = element && image.isImageWidget( element );
+
+      if ( !isImage ) {
+        return false;
+      }
+
+      const altAtr = element.getChild(0).getAttribute('alt')
+      if (altAtr && altAtr.includes(QMSCKEditorConstant.QMSCK_FLOWCHART)) {
+        return true;
+      }
+      else {
+        return false;
+      }
+    }
+}

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

@@ -1,6 +1,7 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import InsertImageMapCommand from './insertimagemapcommand'; 
 import ResizeImageMapCommand from './resizeimagemapcommand'; 
+import OpenImageMapCommand from './openimagemapcommand'; 
 import { ImageMapAttributes, ImageMapElements, debounced, trimStart, drawMap, ImageMapCommands, HtmlAttributes, HtmlElements, findMapNodes } from './utils';
 import ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
 import { downcastImageWidthAttribute, downcastImageHeightAttribute, downcastImageSavedSrcAttribute, downcastImageMapAttribute, 
@@ -71,28 +72,32 @@ import { isWidget } from  '@ckeditor/ckeditor5-widget/src/utils';
             editor.execute(ImageMapCommands.RESIZE);
         }, 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);
         });
  
+        model.document.on('change:data', (evt, batch) => {
+            if(this.allowDeleteMap == true){
+                this.allowDeleteMap = false;
+                OnImageDeleted(model, batch);
+            }
+        } );
+
+        editor.commands.add(ImageMapCommands.OPEN, new OpenImageMapCommand(editor));
         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;
+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,7 +108,7 @@ 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 === ImageMapElements.IMAGE) {
             hasNoImageRemoved = false
             break
         }
@@ -112,7 +117,7 @@ function OnImageDeleted(model, event){
     // 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 === ImageMapElements.IMAGE))
  
     // removed image nodes
     const removedMapNames = []
@@ -129,8 +134,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);
                 });
@@ -150,34 +154,34 @@ function onImageLoaded(domEvent){
  
         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);
+        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(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(map){
+                        map.setAttribute(HtmlAttributes.WIDTH, width);
+                        map.setAttribute(HtmlAttributes.HEIGHT, height);
+                    } 
+                })
             }
+        }
     }
 }

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

@@ -39,7 +39,7 @@ import { ImageMapCommands } from './utils';
              view.bind('isEnabled').to(command, 'isEnabled');
  
              this.listenTo(view, 'execute', () => {
-                editor.execute(ImageMapCommands.INSERT, {});
+                editor.execute(ImageMapCommands.OPEN, {});
              });
  
              return view;

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

@@ -1,128 +1,92 @@
 
 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 { ImageMapAttributes, ImageMapElements, trimStart, parsePixelToFloat, findFirstMapNode, findMapNodes, drawMap } from './utils';
-import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
- 
+import { ImageMapAttributes, ImageMapElements, trimStart, findMapNodes, drawMap, createInsertedEvent, createRemovedEvent } from './utils';
+
 export default class InsertImageMapCommand extends Command {
-	 
-	refresh() {
-		const element = this.editor.model.document.selection.getSelectedElement();
-		this.isEnabled = isImage(element);
-	}
- 
-	execute() {
+	// refresh() {
+	// 	const element = this.editor.model.document.selection.getSelectedElement();
+	// 	this.isEnabled = isImage(element);
+	// }
+
+	execute( options = {} ) {
 		const editor = this.editor;
 		const model = editor.model;
-		const view = editor.editing.view;
-		const selectedElement = model.document.selection.getSelectedElement();
- 
-		const mapName = selectedElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
-		let originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
-		if(selectedElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) && selectedElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-			originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.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 );
+		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(ImageMapAttributes.IMAGE_USE_MAP) || options.oldName;
 
-		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(ImageMapAttributes.MAP_AREAS) || []);
+			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);
+					});
+				}
 			}
-		}
- 
-		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;    
-            model.change(writer => {
-				var newMapName =  trimStart(evt.detail.name, '#');
-				const areas = evt.detail.areas;
-				const width = evt.detail.imageWidth;
-				const height = evt.detail.imageHeight;
-				const imageElement = model.document.selection.getSelectedElement();
-				const oldMapName = imageElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
 
-				if(!!oldMapName){
-					const range = model.createRangeIn(model.document.getRoot());
-					const existingMapElements = findMapNodes([trimStart(oldMapName, '#')], range);
-					if(existingMapElements && existingMapElements.length > 0){
-						existingMapElements.forEach(element => {
-							writer.remove(element);
-						});
-					}
+			if(!!areas && areas.length > 0)
+			{
+				writer.setAttribute(ImageMapAttributes.IMAGE_USE_MAP, '#' + newName, imageElement);
+				writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, width, imageElement);
+				writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, height, imageElement);
+
+				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);
+				}
+				else{
+					originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
 				}
 
-				if(!!areas && areas.length > 0) 
-				{
-					writer.setAttribute(ImageMapAttributes.IMAGE_USE_MAP, '#' + newMapName, imageElement);
-					writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, width, imageElement);
-					writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, height, imageElement);
+				let attrs = {};
+				attrs[ImageMapAttributes.MAP_NAME] = newName;
+				attrs[ImageMapAttributes.MAP_AREAS] = JSON.stringify(areas);
+				attrs[ImageMapAttributes.MAP_WIDTH] = width;
+				attrs[ImageMapAttributes.MAP_HEIGHT] = height;
+				const mapElement = writer.createElement(ImageMapElements.MAP, attrs);
 
-					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);
-					}
-					else{
-						originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
-					}
-  
-					drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
-						model.enqueueChange(writer => {
-							writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
-						} );
+				writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
+
+				drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
+					model.enqueueChange(writer.batch, writer => {
+						writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+						this.fire(createInsertedEvent(newName));
 					});
-	 
-					let attrs = {};
-					attrs[ImageMapAttributes.MAP_NAME] = newMapName;
-					attrs[ImageMapAttributes.MAP_AREAS] = JSON.stringify(areas);
-					attrs[ImageMapAttributes.MAP_WIDTH] = width;
-					attrs[ImageMapAttributes.MAP_HEIGHT] = height;
-					const mapElement = writer.createElement(ImageMapElements.MAP, attrs);	 
+				});
+			}
+			else {
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
+					writer.removeAttribute(ImageMapAttributes.IMAGE_USE_MAP, imageElement);
+				}
 
-					writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
-				} 
-				else {
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
-						writer.removeAttribute(ImageMapAttributes.IMAGE_USE_MAP, imageElement);
-					}
- 
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-						 
-						let src = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
-						if(!!src){
-							writer.setAttribute(ImageMapAttributes.IMAGE_SRC, src, imageElement);
-						}
-						writer.removeAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, imageElement);
-					}
- 
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_HEIGHT)){
-						writer.removeAttribute(ImageMapAttributes.IMAGE_HEIGHT, imageElement);
-					}
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
 
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_WIDTH)){
-						writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
+					let src = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
+					if(!!src){
+						writer.setAttribute(ImageMapAttributes.IMAGE_SRC, src, imageElement);
 					}
+					writer.removeAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, imageElement);
 				}
-            });
-        },
-		{ once: true });
+
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_HEIGHT)){
+					writer.removeAttribute(ImageMapAttributes.IMAGE_HEIGHT, imageElement);
+				}
+
+				if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_WIDTH)){
+					writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
+				}
+				this.fire(createRemovedEvent(newName));
+			}
+		},{ once: true });
 	}
 }