qms-angular 1.0.36 → 1.0.40

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

@@ -22,8 +22,6 @@ import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
 import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
 import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
 import List from '@ckeditor/ckeditor5-list/src/list.js';
-// import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
-// import MediaToolbar from "@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.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';
@@ -59,7 +57,9 @@ 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';
 
@@ -119,10 +119,13 @@ Editor.builtinPlugins = [
 	SpecialCharactersMathematical,
 	Clipboard,
 	PasteFromOffice,
-  	Tooltip,
+  Tooltip,
 	FindAndReplace,
 	PageBreak,
-	Indent, 
+	ImageMap,
+  QMSCKEditorBpmnPlugin,
+	PageBreak,
+	Indent,
 	IndentBlock
 ];
 

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

@@ -0,0 +1,63 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+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';
+
+export default class QMSCKEditorBpmnPlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+
+        editor.ui.componentFactory.add('qmsBpmn', locale => {
+            const view = new ButtonView(locale);
+
+            view.set({
+                label: 'Business Process Model and Notation',
+                icon: BpmnIcon,
+                tooltip: true
+            });
+
+            view.on('execute', () => {
+              const isBpmn = this.isBpmnImage(editor.editing.view.document.selection.getSelectedElement(), editor.plugins.get('Image'))
+              if (isBpmn) {
+                const parentElement = editor.editing.view.document.selection.getSelectedElement();
+                const altAtr = parentElement.getChild(0).getAttribute('alt');
+                const arrAtr = altAtr.split("#");
+                const id = arrAtr[1];
+                QMSCKEditorService.bpmnNotify(id);
+              }
+              else {
+                QMSCKEditorService.bpmnNotify('');
+              }
+              window.addEventListener(QMSCKEditorConstant.QMSCK_BPMN_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 );
+                } );
+              });
+            });
+
+            return view;
+        })
+    }
+
+    isBpmnImage( 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_BPMN)) {
+        return true;
+      }
+      else {
+        return false;
+      }
+    }
+}

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

@@ -12,4 +12,12 @@ export const QMSCK_LINK_OPTION = 'LINK_OPTION'
 /* Tooltip */
 export const QMSCK_TOOLTIP_PLUGIN_MSG = 'QMSCK_TOOLTIP_PLUGIN_MSG';
 export const QMSCK_TOOLTIP_PLUGIN_RESP = 'QMSCK_TOOLTIP_PLUGIN_RESP';
-export const QMSCK_TOOLTIP_IS_PROCESSING = 'QMSCK_TOOLTIP_IS_PROCESSING';
+export const QMSCK_TOOLTIP_IS_PROCESSING = 'QMSCK_TOOLTIP_IS_PROCESSING';
+/* ImageMap */
+export const QMSCK_IMAGEMAP_PLUGIN_MSG = 'QMSCK_IMAGEMAP_PLUGIN_MSG';
+export const QMSCK_IMAGEMAP_PLUGIN_RESP = 'QMSCK_IMAGEMAP_PLUGIN_RESP';
+export const QMSCK_IMAGEMAP_IS_PROCESSING = 'QMSCK_IMAGEMAP_IS_PROCESSING';
+/* Bpmn */
+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';

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

@@ -49,3 +49,23 @@ export function tooltipNotify(value) {
         '*'
     );
 }
+
+export function imageMapNotify(value) {
+    window.postMessage(
+        {
+            eventName: constant.QMSCK_IMAGEMAP_PLUGIN_MSG,
+            value
+        },
+        '*'
+    );
+}
+
+export function bpmnNotify(value) {
+  window.postMessage(
+      {
+          eventName: constant.QMSCK_BPMN_PLUGIN_MSG,
+          value
+      },
+      '*'
+  );
+}

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

@@ -0,0 +1,378 @@
+import { getViewImgFromWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
+import { ImageMapAttributes, ImageMapElements, trimStart, HtmlAttributes, HtmlElements} from './utils';
+import { first } from '@ckeditor/ckeditor5-utils';
+
+export function dowcastMapAreaAttribute() {
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.MAP_AREAS}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+            const viewWriter = conversionApi.writer;
+            const mapElement = conversionApi.mapper.toViewElement(data.item);
+            if(!mapElement){
+                return;
+            }
+            if(data.attributeNewValue != data.attributeOldValue && !!data.attributeNewValue){
+                if(mapElement.childCount > 0){
+                    Array.from(mapElement.getChildren()).forEach((child) =>{
+                        viewWriter.remove(child);
+                    });
+                }
+                const areas = JSON.parse(data.attributeNewValue || '[]');
+                if(!!areas && areas.length > 0){
+                    areas.forEach(area => {
+                        if(area.coords && area.shape){
+                            let areaElement = viewWriter.createEmptyElement(HtmlElements.AREA, {
+                                coords: area.coords,
+                                alt: area.alt || '', 
+                                shape: area.shape || '',
+                                href: area.href,
+                                target: area.target
+                           });
+                            viewWriter.insert(viewWriter.createPositionAt(mapElement, 0), areaElement);
+                       }
+                   });
+               }
+            }
+        });
+	};
+}
+
+export function dowcastMapNameAttribute() {
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.MAP_NAME}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+            const viewWriter = conversionApi.writer;
+            const mapElement = conversionApi.mapper.toViewElement(data.item);
+            if(!mapElement){
+                return;
+            }
+            viewWriter.setAttribute(HtmlAttributes.NAME, data.attributeNewValue, mapElement);
+            viewWriter.setAttribute(HtmlAttributes.ID, data.attributeNewValue, mapElement);
+        });
+	};
+}
+
+export function dowcastMapWidthAttribute() {
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.MAP_WIDTH}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+            const viewWriter = conversionApi.writer;
+            const mapElement = conversionApi.mapper.toViewElement(data.item);
+            if(!mapElement){
+                return;
+            }
+            viewWriter.setAttribute(HtmlAttributes.WIDTH, data.attributeNewValue || '', mapElement);
+        });
+	};
+}
+
+export function dowcastMapHeightAttribute() {
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.MAP_HEIGHT}:${ImageMapElements.MAP}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+            const viewWriter = conversionApi.writer;
+            const mapElement = conversionApi.mapper.toViewElement(data.item);
+            if(!mapElement){
+                return;
+            }
+            viewWriter.setAttribute(HtmlAttributes.HEIGHT, data.attributeNewValue || '', mapElement);
+        });
+	};
+}
+
+export function downcastMapElement() {
+	return dispatcher => {
+		dispatcher.on(`insert:${ImageMapElements.MAP}`, (evt, data, conversionApi)=> {
+            const { consumable, writer, mapper} = conversionApi;
+            if (!consumable.consume(data.item, 'insert')) {
+                return;
+            }
+            const viewPosition = mapper.toViewPosition(data.range.start);
+            const viewElement = writer.createContainerElement(HtmlElements.MAP);
+            mapper.bindElements(data.item, viewElement);
+            writer.insert(viewPosition, viewElement );
+        });
+	};
+}
+
+export function downcastImageWidthAttribute() {
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_WIDTH}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+            const viewWriter = conversionApi.writer;
+            const figure = conversionApi.mapper.toViewElement(data.item);
+            const img = getViewImgFromWidget(figure);
+            viewWriter.setAttribute(HtmlAttributes.WIDTH,  data.attributeNewValue, img);
+        });
+	};
+}
+ 
+
+export function downcastImageHeightAttribute() {
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_HEIGHT}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+            const viewWriter = conversionApi.writer;
+            const figure = conversionApi.mapper.toViewElement(data.item);
+            const img = getViewImgFromWidget(figure);
+            viewWriter.setAttribute(HtmlAttributes.HEIGHT,  data.attributeNewValue, img);
+        });
+	};
+}
+
+  
+export function downcastImageSavedSrcAttribute(isDataDowncast) {
+    const priority = isDataDowncast ? 'highest' : 'normal';
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_SAVED_SRC}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+    
+            const viewWriter = conversionApi.writer;
+            const figure = conversionApi.mapper.toViewElement(data.item);
+            const img = getViewImgFromWidget(figure);
+      
+            if(isDataDowncast == true){
+                if(data.item.hasAttribute(data.attributeKey)){
+                    const originalSrc = data.item.getAttribute(data.attributeKey);
+                    viewWriter.setAttribute(HtmlAttributes.SRC, originalSrc, img);
+                }
+            }
+            else {
+                viewWriter.setAttribute(HtmlAttributes.SAVED_SRC, data.attributeNewValue || '', img);
+            }       
+        }, 
+        {
+             priority: priority 
+        });
+	};
+}
+ 
+export function downcastImageMapAttribute() {
+	return dispatcher => {
+		dispatcher.on(`attribute:${ImageMapAttributes.IMAGE_USE_MAP}:${ImageMapElements.IMAGE}`, (evt, data, conversionApi)=> {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+    
+            const viewWriter = conversionApi.writer;
+            const figure = conversionApi.mapper.toViewElement(data.item);
+            const img = getViewImgFromWidget(figure);
+    
+            const newValue = data.attributeNewValue || '';
+            const oldValue = data.attributeOldValue || '';
+    
+            if(!!newValue){
+                viewWriter.setAttribute(HtmlAttributes.USE_MAP, data.attributeNewValue, img);
+           } else if(!!oldValue){
+                viewWriter.removeAttribute(HtmlAttributes.USE_MAP, img);
+           }
+        });
+	};
+}
+  
+export function upcastMapElement() {
+	return dispatcher => {
+		dispatcher.on(`element:${HtmlElements.MAP}`, (evt, data, conversionApi) => {
+			const viewMap = data.viewItem;
+            const currentPosition = data.modelCursor;
+            const modelWriter = conversionApi.writer;
+           
+            // Do not convert if this is not an map.
+            if (!conversionApi.consumable.test(data.viewItem, {name: true})) {
+                return;
+           }
+  
+			const name = viewMap.getAttribute(HtmlAttributes.NAME);
+			 // Do not convert if image element is missing 'name' attribute.
+			if (!name) {
+                return; 
+           }
+
+            const areas = [];
+            if(viewMap.childCount > 0){
+                for (const child of Array.from(viewMap.getChildren())) {
+                    let area = {};
+                    area[HtmlAttributes.COORDS] = child.getAttribute(HtmlAttributes.COORDS);
+                    area[HtmlAttributes.HREF] = child.getAttribute(HtmlAttributes.HREF);
+                    area[HtmlAttributes.ALT] = child.getAttribute(HtmlAttributes.ALT) || '';
+                    area[HtmlAttributes.SHAPE] = child.getAttribute(HtmlAttributes.SHAPE) || '';
+                    area[HtmlAttributes.TARGET] = child.getAttribute(HtmlAttributes.TARGET);
+                    areas.push(area);
+               }
+           }
+  
+            const width = viewMap.getAttribute(HtmlAttributes.WIDTH);
+            const height = viewMap.getAttribute(HtmlAttributes.HEIGHT);
+            let attrs = {};
+            attrs[ImageMapAttributes.MAP_NAME] = name;
+            attrs[ImageMapAttributes.MAP_AREAS] = JSON.stringify(areas);
+            attrs[ImageMapAttributes.MAP_WIDTH] = width;
+            attrs[ImageMapAttributes.MAP_HEIGHT] = height;
+            const modelMap = modelWriter.createElement(ImageMapElements.MAP, attrs);
+            
+            //TODO: Insert map element as a direct child of root
+            modelWriter.insert(modelMap, currentPosition);
+            conversionApi.convertChildren(viewMap, modelMap);
+            conversionApi.updateConversionResult(modelMap, data);
+		}, 
+        {
+            priority: 'high' 
+       });
+	};
+}
+
+
+export function upcastImageMapAttribute() {
+	return dispatcher => {
+		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+            const {consumable, writer} = conversionApi;
+            const viewImage = data.viewItem;
+        
+            // Do not convert if the `usemap` attribute  was already converted.
+			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.USE_MAP]})) {
+				return;
+			}
+
+			const usemap = viewImage.getAttribute(HtmlAttributes.USE_MAP);
+			 // Do not convert if image element is missing `usemap` attribute
+			if (!usemap) {
+				return;
+			}
+
+            const modelImage = first(data.modelRange.getItems());
+            // When image wasn't successfully converted then finish conversion.
+            if (!modelImage) {
+                return;
+           }
+
+            if (modelImage.is('element', ImageMapElements.IMAGE)) {
+                const mapName =  trimStart(usemap, '#');
+				writer.setAttribute(ImageMapAttributes.IMAGE_USE_MAP, '#' + mapName, modelImage);
+			}
+		}, 
+        {
+            priority: 'low'
+        });
+	};
+}
+ 
+
+export function upcastImageSavedSrcAttribute() {
+	return dispatcher => {
+		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+            const {consumable, writer} = conversionApi;
+            const viewImage = data.viewItem;
+         
+            // Do not convert if the `usemap` attribute  was already converted.
+			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.SAVED_SRC]})) {
+				return;
+			}
+
+			const originalSrc = viewImage.getAttribute(HtmlAttributes.SAVED_SRC);
+ 
+			 // Do not convert if image element is missing `usemap` attribute
+			if (!originalSrc) {
+				return;
+			}
+
+            const modelImage = first(data.modelRange.getItems());
+            // When image wasn't successfully converted then finish conversion.
+            if (!modelImage) {
+                return;
+           }
+
+            if (modelImage.is('element', ImageMapElements.IMAGE)) {
+				writer.setAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, originalSrc || '', modelImage);
+			}
+ 
+		}, 
+        { 
+            priority: 'low' 
+        });
+	};
+}
+
+
+export function upcastImageWidthAttribute() {
+	return dispatcher => {
+		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+            const {consumable, writer} = conversionApi;
+            const viewImage = data.viewItem;
+         
+            // Do not convert if the `usemap` attribute  was already converted.
+			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.WIDTH]})) {
+				return;
+			}
+
+			const width = viewImage.getAttribute(HtmlAttributes.WIDTH);
+ 
+			 // Do not convert if image element is missing `usemap` attribute
+			if (!width) {
+				return;
+			}
+
+            const modelImage = first(data.modelRange.getItems());
+            // When image wasn't successfully converted then finish conversion.
+            if (!modelImage) {
+                return;
+            }
+
+            if (modelImage.is('element', ImageMapElements.IMAGE)) {
+				writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, width, modelImage);
+			}
+		}, 
+        {
+            priority: 'low'
+        });
+	};
+}
+ 
+
+
+export function upcastImageHeightAttribute() {
+	return dispatcher => {
+		dispatcher.on(`element:${HtmlElements.IMAGE}`, (evt, data, conversionApi) => {
+            const {consumable, writer} = conversionApi;
+            const viewImage = data.viewItem;
+          
+            // Do not convert if the `usemap` attribute  was already converted.
+			if (!consumable.consume(viewImage, {attributes: [HtmlAttributes.HEIGHT]})) {
+				return;
+			}
+
+			const height = viewImage.getAttribute(HtmlAttributes.HEIGHT);
+ 
+			 // Do not convert if image element is missing `usemap` attribute
+			if (!height) {
+				return;
+			}
+
+            const modelImage = first(data.modelRange.getItems());
+            // When image wasn't successfully converted then finish conversion.
+            if (!modelImage) {
+                return;
+            }
+
+            if (modelImage.is('element', ImageMapElements.IMAGE)) {
+				writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, height, modelImage);
+			}
+		}, 
+        {
+            priority: 'low'
+        });
+	};
+}

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

@@ -0,0 +1,14 @@
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import ImageMapEditing from './imagemapediting';
+import ImageMapUI from './imagemapui';
+ 
+export default class ImageMap extends Plugin {
+ 
+	static get requires() {
+		return [ ImageMapEditing, ImageMapUI ];
+	}
+ 
+	static pluginName() {
+		return 'ImageMap';
+	}
+}