qms-angular 1.0.36 → 1.0.40

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

@@ -0,0 +1,183 @@
+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 ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
+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';
+
+ export default class ImageMapEditing extends Plugin {
+    static get requires() {
+		return ['ImageResize', 'Delete'];
+	}
+
+     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.register(ImageMapElements.MAP, {
+            isObject: true,
+            allowWhere: '$block',
+            allowAttributes: [ 
+                ImageMapAttributes.MAP_NAME,
+                ImageMapAttributes.MAP_AREAS, 
+                ImageMapAttributes.MAP_WIDTH, 
+                ImageMapAttributes.MAP_HEIGHT
+            ]
+       });
+
+        conversion.for('dataDowncast').add(downcastImageWidthAttribute());
+        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);
+        }, 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, '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;
+    // if no difference
+    if (differ.isEmpty) { return; }
+    const changes = differ.getChanges({ includeChangesInGraveyard: true });
+    if (changes.length === 0) { return; }
+
+    let hasNoImageRemoved = true;
+    // check any image remove or not
+    for (let i = 0; i < changes.length; i++){
+        const change = changes[i]
+        // if image remove exists
+        if (change && change.type === 'remove' && change.name === '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'))
+ 
+    // 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(removedMapNames && removedMapNames.length > 0){
+        const range = model.createRangeIn(model.document.getRoot());
+        const existingMapElements = findMapNodes(removedMapNames, range);
+
+        if(existingMapElements && existingMapElements.length > 0){
+            const redoingBatch = model.createBatch( 'transparent' );
+            model.enqueueChange(redoingBatch, writer => {
+                existingMapElements.forEach(element => {
+                    writer.remove(element);
+                });
+            } );
+        }
+    }
+}
+
+function onImageLoaded(domEvent){
+    //Must be attached only to images loaded by the `ImageInsert`, `ImageUpload` or `LinkImage` plugins.
+    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);
+                        } 
+                    })
+                }
+            }
+    }
+}

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

@@ -0,0 +1,49 @@
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import { ButtonView, ContextualBalloon } from '@ckeditor/ckeditor5-ui';
+import imageMapIcon from '../../themes/icons/imagemap.svg';
+import { ImageMapCommands } 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 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, {});
+             });
+ 
+             return view;
+         });
+     }
+ }
+ 

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

@@ -0,0 +1,127 @@
+
+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';
+ 
+export default class InsertImageMapCommand 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(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 );
+
+		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) || []);
+			}
+		}
+ 
+		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, '#' + newMapName, 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);
+					}
+  
+					drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
+						model.enqueueChange(writer => {
+							writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+						} );
+					});
+	 
+					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);	 
+
+					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_WIDTH)){
+						writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
+					}
+				}
+            });
+        });
+	}
+}
+

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

@@ -0,0 +1,82 @@
+
+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  { getSelectedImageWidget} from '@ckeditor/ckeditor5-image/src/image/utils';
+
+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);
+	}
+ 
+	execute() {
+        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);
+        if(mapName){
+            const imageWidget = getSelectedImageWidget( view.document.selection);
+            const widgetResizePlugin = editor.plugins.get('WidgetResize');
+            const resizer = widgetResizePlugin.getResizerByViewElement( imageWidget );
+            if(resizer){
+                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 widthChanged = newWidth != width && width != 0 ;
+                    const heightChanged = newHeight != height && height != 0 ;
+
+                    if(widthChanged || heightChanged){
+                        if(widthChanged){
+                            const widthRatio = (newWidth * 1.0) / width;
+                            for (var i = 0; i < areas.length; ++i) {
+                                areas[i] = resizeAreaWidth(areas[i], widthRatio);
+                            }
+                        }
+
+                        if(heightChanged){
+                            const heightRatio = (newHeight * 1.0) / height;
+                            for (var i = 0; i < areas.length; ++i) {
+                                areas[i] = resizeAreaHeight(areas[i], heightRatio, widthChanged);
+                            }
+                        }
+
+                        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);
+                            }
+                            else{
+                                originalImageSrc = imageElement.getAttribute(ImageMapAttributes.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);
+
+                            drawMap(originalImageSrc, newWidth, newHeight, areas, (oldsrc, newsrc) =>{
+                                model.enqueueChange(writer => {
+                                    writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
+                                });
+                            });
+                        });
+                    }
+                }
+            }
+        }
+	} 
+}
+

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

@@ -0,0 +1,234 @@
+export const HtmlAttributes = {
+	COORDS: 'coords',
+	HREF: 'href',
+	SHAPE: 'shape',
+	NAME: 'name',
+	TARGET: 'target',
+	USE_MAP: 'usemap',
+	ALT: 'alt',
+	WIDTH: 'width', 
+	HEIGHT: 'height',
+	SRC: 'src',
+	ID: 'id',
+	SAVED_SRC: 'savedsrc'
+}
+
+
+export const HtmlElements = {
+	MAP: 'map',
+	IMAGE: 'img',
+	AREA: 'area'
+}
+
+
+export const ImageMapAttributes = {
+	MAP_AREAS: 'mapareas',
+	MAP_NAME: 'mapname' ,
+	MAP_WIDTH: 'mapwidth', 
+	MAP_HEIGHT: 'mapheight',
+	IMAGE_USE_MAP: 'imageusemap',
+	IMAGE_SAVED_SRC: 'imagesavedsrc',
+	IMAGE_SRC: 'src',//It is already defined by the image plugin
+	IMAGE_WIDTH: 'imagewidth', 
+	IMAGE_HEIGHT: 'imageheight',
+}
+
+export const ImageMapCommands = {
+	INSERT: 'insertImageMap',
+	RESIZE: 'resizeImageMap'
+}
+
+export const ImageMapElements = {
+	MAP: 'npmap',
+	IMAGE: 'image'//It is already defined by the image plugin
+}
+
+export function trimStart(text, charToRemove){
+	if(text && text.length > 0){
+		if(text.charAt(0) == charToRemove){
+			return text.substring(1);
+		}
+	}
+	return text;
+}
+ 
+export function parsePixelToFloat(pixel, fractionDigits){
+	if(pixel){
+		pixel = pixel.toString().replaceAll('px', '');
+		try
+		{
+			return Number.parseFloat(pixel).toFixed(fractionDigits);
+		}
+		catch{
+
+		}
+	}
+	return 0;
+}
+
+function isMapNode(lowerCaseNameObject, node){
+	return node.is('element', ImageMapElements.MAP)
+			&& node.hasAttribute(ImageMapAttributes.MAP_NAME)
+			&& lowerCaseNameObject[getLowerCaseMapName(node)]; 
+}
+
+function getLowerCaseMapName(node){
+	return node.getAttribute(ImageMapAttributes.MAP_NAME).toLowerCase(); 
+}
+
+export function findMapNodes(names, range) {
+	if(!names) { return []; }
+
+	const lowerCaseNameObject = {};
+	names.forEach(name => {
+		let lowerCase = name.toLowerCase();
+		lowerCaseNameObject[lowerCase] = lowerCase;
+	});
+
+    const nodes = {};
+    for ( const value of range.getWalker() ) {
+        const node = value.item;
+        if (isMapNode(lowerCaseNameObject, node)) {
+			let mapname = getLowerCaseMapName(node);
+            nodes[mapname] = node;
+        }
+    }
+    return Object.keys(nodes).map(key => nodes[key]);
+};
+ 
+
+export function findFirstMapNode(name, range) {
+	if(!name) { return null; }
+
+	const lowerCaseNameObject = {};
+	let lowerCase = name.toLowerCase();
+	lowerCaseNameObject[lowerCase] = lowerCase;
+
+    for ( const value of range.getWalker() ) {
+        const node = value.item;
+        if (isMapNode(lowerCaseNameObject, node)) {
+			return node;
+        }
+    }
+    return null;
+};
+ 
+
+
+export function resizeAreaWidth(area, ratio) {
+	var coords = area.coords.split(',');
+	switch (area.shape) {
+		case 'circle':
+			coords[0] = Math.round(coords[0] * ratio); // Moves center point's left coordinate
+			coords[2] = Math.round(coords[2] * ratio); // Ajust radius
+			area.coords = coords.join(',');
+			return area;
+			case 'rect':
+			case 'poly':
+			// Moves each point's left coordinate
+			for (var i = 0; i < coords.length; i += 2) {
+				if (i >= coords.length) { break; }
+				coords[i] = Math.round(coords[i] * ratio);
+			}
+			area.coords = coords.join(',');
+			return area;
+	}
+};
+
+export function resizeAreaHeight(area, ratio, widthChanged) {
+	var coords = area.coords.split(',');
+	switch (area.shape) {
+		case 'circle':
+			coords[1] = Math.round(coords[1] * ratio); // Moves center point's top coordinate
+			if (!widthChanged) {
+				coords[2] = Math.round(coords[2] * ratio); // Ajust radius
+			}
+			area.coords = coords.join(',');
+			return area;
+		case 'rect':
+		case 'poly':
+			// Moves each point's top coordinate
+			for (var i = 1; i < coords.length; i += 2) {
+				if (i >= coords.length) { break; }
+				coords[i] = Math.round(coords[i] * ratio);
+			}
+			area.coords = coords.join(',');
+			return area;
+	}
+};
+  
+ export function debounced(fn, delay) {
+	let timerId;
+	return function (...args) {
+	  if (timerId) {
+		clearTimeout(timerId);
+	  }
+	  timerId = setTimeout(() => {
+		fn(...args);
+		timerId = null;
+	  }, delay);
+	}
+  }
+
+export function drawMap(imageSrc, imageWidth, imageHeight, areas, callback){
+	if(areas && areas.length > 0){	 
+		try
+		{
+			var tempImage = new Image(imageWidth, imageHeight);
+			tempImage.src = imageSrc;
+			tempImage.addEventListener("load", () =>{
+				var canvas = document.createElement('canvas');
+				var context = canvas.getContext('2d');
+	
+				canvas.width = imageWidth;
+				canvas.height = imageHeight;
+				context.drawImage(tempImage, 0, 0, imageWidth, imageHeight);
+				context.strokeStyle = "#FF0000";
+				context.lineWidth = 1;
+				 
+				for (var i = 0; i < areas.length; i++) {
+					const area = areas[i];
+					const coords = area.coords.split(',');
+					switch (area.shape) {
+						case 'circle':
+							context.beginPath();
+							context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, true);
+							context.closePath();
+							context.stroke();
+							break;
+		
+						case 'poly':
+							context.beginPath();
+							context.moveTo(coords[0], coords[1]);
+							for (var j = 2; j < coords.length; j += 2) {
+								context.lineTo(coords[j], coords[j + 1]);
+							}
+							context.closePath();
+							context.stroke();
+							break;
+		
+						default:
+							context.strokeRect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
+							break;
+					}
+				}
+				let newSrc = imageSrc;
+				let oldSrc = imageSrc;
+				try
+				{
+					newSrc = canvas.toDataURL();
+				}
+				catch(err){
+					 
+				}
+				if(callback){
+					callback(oldSrc, newSrc);
+				}
+				 
+			}, false);
+		}
+		catch(err){
+			 
+		}	 
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/link/linkediting.js

@@ -18,7 +18,7 @@ import UnlinkCommand from './unlinkcommand';
 import ManualDecorator from './utils/manualdecorator';
 import { createLinkElement, ensureSafeUrl, getLocalizedDecorators, normalizeDecorators } from './utils';
 import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
-import '../../themes/tyles/link.css';
+import '../../themes/styles/link.css';
 import { isLinkElement } from './utils';
 
 const HIGHLIGHT_CLASS = 'ck-link_selected';

package/src/assets/qms-ckeditor-plugin/src/plugins/link/linkimage.js

@@ -11,7 +11,7 @@ import { Plugin } from '@ckeditor/ckeditor5-core';
 import LinkImageEditing from './linkimageediting';
 import LinkImageUI from './linkimageui';
 
-import '../../themes/tyles/linkimage.css';
+import '../../themes/styles/linkimage.css';
 
 /**
  * The `LinkImage` plugin.