qms-angular 1.0.70 → 1.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/bundles/qms-angular.umd.js +1108 -126
  2. package/bundles/qms-angular.umd.js.map +1 -1
  3. package/esm2015/lib/components/button/button.js +1 -1
  4. package/esm2015/lib/components/qms-navigation-drawer/qms-navigation-drawer.component.js +5 -3
  5. package/esm2015/lib/components/qms-paginator/index.js +2 -0
  6. package/esm2015/lib/components/qms-paginator/public_api.js +3 -0
  7. package/esm2015/lib/components/qms-paginator/qms-paginator.component.js +173 -0
  8. package/esm2015/lib/components/qms-paginator/qms-paginator.module.js +34 -0
  9. package/esm2015/lib/components/qms-status-dropdown/qms-status-dropdown.component.js +2 -2
  10. package/esm2015/lib/model/en.js +21 -3
  11. package/esm2015/lib/model/no.js +20 -2
  12. package/esm2015/lib/qms-ckeditor-components/common/bpmn/inspector.function.js +68 -16
  13. package/esm2015/lib/qms-ckeditor-components/common/constants/ckeditorEvent.constant.js +5 -1
  14. package/esm2015/lib/qms-ckeditor-components/common/constants/ckeditorFlowchart.const.js +10 -1
  15. package/esm2015/lib/qms-ckeditor-components/common/constants/ckeditorLink.constant.js +7 -0
  16. package/esm2015/lib/qms-ckeditor-components/common/enums/document-type.enum.js +2 -1
  17. package/esm2015/lib/qms-ckeditor-components/common/enums/shape-flow-chart-connection-type.js +8 -0
  18. package/esm2015/lib/qms-ckeditor-components/common/models/qms-ckeditor-flowchart-template.model.js +9 -0
  19. package/esm2015/lib/qms-ckeditor-components/common/models/qms-ckeditor-flowchart.model.js +9 -0
  20. package/esm2015/lib/qms-ckeditor-components/common/models/qms-ckeditor-save-as-template.model.js +3 -0
  21. package/esm2015/lib/qms-ckeditor-components/common/module/confirm/qms-ckeditor-confirm.component.js +1 -1
  22. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.js +545 -34
  23. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/save-template/save-template.component.js +46 -18
  24. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-imagemap/qms-ckeditor-imagemap.component.js +1 -1
  25. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-link/attachments/link-attachment.component.js +1 -1
  26. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-link/qms-ckeditor-link.component.js +1 -1
  27. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-load-template/qms-ckeditor-load-template.component.js +1 -1
  28. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-relation/qmsckeditor-related.component.js +1 -1
  29. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-template/qms-ckeditor-template.component.js +1 -1
  30. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-tooltip/qms-ckeditor-tooltip.component.js +1 -1
  31. package/esm2015/lib/qms-ckeditor-components/models/qms-ckeditor-bpmn-data.model.js +8 -0
  32. package/esm2015/lib/qms-ckeditor-components/qms-ckeditor.component.js +9 -3
  33. package/esm2015/lib/qms-ckeditor-components/qms-ckeditor.module.js +4 -2
  34. package/esm2015/lib/qms-ckeditor-components/services/qms-ckeditor-bpmn.service.js +58 -20
  35. package/esm2015/lib/qms-ckeditor-components/services/qms-ckeditor-flowchart.service.js +26 -0
  36. package/esm2015/public-api.js +6 -1
  37. package/esm2015/qms-angular.js +2 -1
  38. package/fesm2015/qms-angular.js +1028 -104
  39. package/fesm2015/qms-angular.js.map +1 -1
  40. package/lib/components/qms-navigation-drawer/qms-navigation-drawer.component.d.ts +1 -0
  41. package/lib/components/qms-paginator/index.d.ts +1 -0
  42. package/lib/components/qms-paginator/public_api.d.ts +2 -0
  43. package/lib/components/qms-paginator/qms-paginator.component.d.ts +51 -0
  44. package/lib/components/qms-paginator/qms-paginator.module.d.ts +2 -0
  45. package/lib/model/en.d.ts +18 -0
  46. package/lib/model/no.d.ts +18 -0
  47. package/lib/qms-ckeditor-components/common/bpmn/inspector.function.d.ts +28 -0
  48. package/lib/qms-ckeditor-components/common/constants/ckeditorEvent.constant.d.ts +4 -0
  49. package/lib/qms-ckeditor-components/common/constants/ckeditorFlowchart.const.d.ts +9 -0
  50. package/lib/qms-ckeditor-components/common/constants/ckeditorLink.constant.d.ts +6 -0
  51. package/lib/qms-ckeditor-components/common/enums/document-type.enum.d.ts +1 -0
  52. package/lib/qms-ckeditor-components/common/enums/shape-flow-chart-connection-type.d.ts +6 -0
  53. package/lib/qms-ckeditor-components/common/models/qms-ckeditor-flowchart-template.model.d.ts +7 -0
  54. package/lib/qms-ckeditor-components/common/models/qms-ckeditor-flowchart.model.d.ts +7 -0
  55. package/lib/qms-ckeditor-components/common/models/qms-ckeditor-save-as-template.model.d.ts +5 -0
  56. package/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.d.ts +85 -4
  57. package/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/save-template/save-template.component.d.ts +8 -2
  58. package/lib/qms-ckeditor-components/models/qms-ckeditor-bpmn-data.model.d.ts +7 -0
  59. package/lib/qms-ckeditor-components/services/qms-ckeditor-bpmn.service.d.ts +1 -0
  60. package/lib/qms-ckeditor-components/services/qms-ckeditor-flowchart.service.d.ts +10 -0
  61. package/package.json +1 -1
  62. package/public-api.d.ts +4 -0
  63. package/qms-angular.d.ts +1 -0
  64. package/qms-angular.metadata.json +1 -1
  65. package/src/assets/jointjs/js/rappid.js +55919 -55836
  66. package/src/assets/jointjs/scss/bpmn.scss +2 -1
  67. package/src/assets/qms-ckeditor-plugin/build/ckeditor.js +1 -1
  68. package/src/assets/qms-ckeditor-plugin/build/ckeditor.js.map +1 -1
  69. package/src/assets/qms-ckeditor-plugin/src/plugins/bpmn/qmsCKEditorBpmnPlugin.js +31 -6
  70. package/src/assets/qms-ckeditor-plugin/src/plugins/common/qmsCKEditorConstant.js +7 -1
  71. package/src/assets/qms-ckeditor-plugin/src/plugins/common/qmsCKEditorUtil.js +29 -7
  72. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/converters.js +93 -92
  73. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemap.js +4 -4
  74. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapcommand.js +92 -0
  75. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapdialogcommand.js +59 -0
  76. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapediting.js +92 -87
  77. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapui.js +13 -14
  78. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/resizeimagemapcommand.js +25 -24
  79. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/utils.js +40 -49
  80. package/src/lib/components/button/button-icon.scss +5 -1
  81. package/src/lib/components/qms-navigation-drawer/qms-navigation-drawer.component.scss +6 -2
  82. package/src/lib/components/qms-paginator/qms-paginator.component.scss +128 -0
  83. package/src/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.scss +69 -17
  84. package/src/lib/qms-ckeditor-components/styles/_modules.scss +9 -1
  85. package/src/themes/core/_table.scss +1 -0
  86. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/insertimagemapcommand.js +0 -128
@@ -0,0 +1,59 @@
1
+
2
+ import { Command } from '@ckeditor/ckeditor5-core';
3
+ import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
4
+ import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
5
+ import * as QMSCKEditorService from '../common/qmsCKEditorService';
6
+ import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_COMMANDS, parsePixelToFloat, findFirstMapNode } from './utils';
7
+ import { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
8
+ import { trimStart } from '../common/qmsCKEditorUtil';
9
+
10
+ export default class ImageMapDialogCommand extends Command {
11
+
12
+ refresh() {
13
+ const element = this.editor.model.document.selection.getSelectedElement();
14
+ this.isEnabled = isImage(element);
15
+ }
16
+
17
+ execute() {
18
+ const editor = this.editor;
19
+ const model = editor.model;
20
+ const view = editor.editing.view;
21
+ const selectedElement = model.document.selection.getSelectedElement();
22
+
23
+ const mapName = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP);
24
+ let originalImageSrc = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC);
25
+ if(selectedElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC) && selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
26
+ originalImageSrc = selectedElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
27
+ }
28
+
29
+ const data = {'imageUrl': originalImageSrc, 'areas': [], imageWidth: null, imageHeight: null};
30
+ const imageWidget = getSelectedImageWidget( view.document.selection);
31
+ const widgetResizePlugin = editor.plugins.get('WidgetResize');
32
+ const resizer = widgetResizePlugin.getResizerByViewElement( imageWidget );
33
+
34
+ if(resizer){
35
+ const resizerWrapper = resizer._viewResizerWrapper;
36
+ data.imageWidth = parsePixelToFloat(resizerWrapper.getStyle('width', 0));
37
+ data.imageHeight = parsePixelToFloat(resizerWrapper.getStyle('height', 0));
38
+ }
39
+
40
+ if(!!mapName){
41
+ const range = model.createRangeIn(model.document.getRoot());
42
+ const existingMapElement = findFirstMapNode(trimStart(mapName, '#'), range);
43
+ if(existingMapElement){
44
+ data.areas = JSON.parse(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_AREAS) || []);
45
+ }
46
+ }
47
+
48
+ QMSCKEditorService.imageMapNotify(data);
49
+ window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = false;
50
+ window.addEventListener(QMSCKEditorConstant.QMSCK_IMAGEMAP_PLUGIN_RESP, (evt) => {
51
+ if (window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING]) {
52
+ return;
53
+ }
54
+ window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = true;
55
+ const options = evt.detail;
56
+ editor.commands.get(IMAGEMAP_COMMANDS.IMAGEMAP).execute(options);
57
+ }, { once: true});
58
+ }
59
+ }
@@ -1,13 +1,15 @@
1
1
  import { Plugin } from '@ckeditor/ckeditor5-core';
2
- import InsertImageMapCommand from './insertimagemapcommand';
3
- import ResizeImageMapCommand from './resizeimagemapcommand';
4
- import { ImageMapAttributes, ImageMapElements, debounced, trimStart, drawMap, ImageMapCommands, HtmlAttributes, HtmlElements, findMapNodes } from './utils';
2
+ import ImageMapCommand from './imagemapcommand';
3
+ import ResizeImageMapCommand from './resizeimagemapcommand';
4
+ import ImageMapDialogCommand from './imagemapdialogcommand';
5
+ import { IMAGEMAP_ATTRIBUTES, IMAGEMAP_ELEMENTS, drawMap, IMAGEMAP_COMMANDS, HTML_ATTRIBUTES, HTML_ELEMENTS, findMapNodes } from './utils';
5
6
  import ImageLoadObserver from '@ckeditor/ckeditor5-image/src/image/imageloadobserver';
6
- import { downcastImageWidthAttribute, downcastImageHeightAttribute, downcastImageSavedSrcAttribute, downcastImageMapAttribute,
7
- upcastImageSavedSrcAttribute, upcastMapElement, dowcastMapNameAttribute, dowcastMapWidthAttribute, dowcastMapHeightAttribute,
7
+ import { downcastImageWidthAttribute, downcastImageHeightAttribute, downcastImageSavedSrcAttribute, downcastImageMapAttribute,
8
+ upcastImageSavedSrcAttribute, upcastMapElement, dowcastMapNameAttribute, dowcastMapWidthAttribute, dowcastMapHeightAttribute,
8
9
  dowcastMapAreaAttribute, upcastImageMapAttribute, upcastImageHeightAttribute, upcastImageWidthAttribute, downcastMapElement
9
10
  } from './converters';
10
11
  import { isWidget } from '@ckeditor/ckeditor5-widget/src/utils';
12
+ import { trimStart, debounced } from '../common/qmsCKEditorUtil';
11
13
 
12
14
  export default class ImageMapEditing extends Plugin {
13
15
  static get requires() {
@@ -17,33 +19,33 @@ import { isWidget } from '@ckeditor/ckeditor5-widget/src/utils';
17
19
  static get pluginName() {
18
20
  return 'ImageMapEditing';
19
21
  }
20
-
22
+
21
23
  init() {
22
24
  const editor = this.editor;
23
25
  const model = editor.model;
24
26
  const schema = model.schema;
25
27
  const conversion = editor.conversion;
26
28
  const editingView = editor.editing.view;
27
-
29
+
28
30
  editingView.addObserver(ImageLoadObserver);
29
31
 
30
- schema.extend(ImageMapElements.IMAGE, {
31
- allowAttributes: [
32
- ImageMapAttributes.IMAGE_USE_MAP,
33
- ImageMapAttributes.IMAGE_WIDTH,
34
- ImageMapAttributes.IMAGE_HEIGHT,
35
- ImageMapAttributes.IMAGE_SAVED_SRC
36
- ]
32
+ schema.extend(IMAGEMAP_ELEMENTS.IMAGE, {
33
+ allowAttributes: [
34
+ IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP,
35
+ IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH,
36
+ IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT,
37
+ IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC
38
+ ]
37
39
  });
38
40
 
39
- schema.register(ImageMapElements.MAP, {
41
+ schema.register(IMAGEMAP_ELEMENTS.MAP, {
40
42
  isObject: true,
41
43
  allowWhere: '$block',
42
- allowAttributes: [
43
- ImageMapAttributes.MAP_NAME,
44
- ImageMapAttributes.MAP_AREAS,
45
- ImageMapAttributes.MAP_WIDTH,
46
- ImageMapAttributes.MAP_HEIGHT
44
+ allowAttributes: [
45
+ IMAGEMAP_ATTRIBUTES.MAP_NAME,
46
+ IMAGEMAP_ATTRIBUTES.MAP_AREAS,
47
+ IMAGEMAP_ATTRIBUTES.MAP_WIDTH,
48
+ IMAGEMAP_ATTRIBUTES.MAP_HEIGHT
47
49
  ]
48
50
  });
49
51
 
@@ -51,48 +53,52 @@ import { isWidget } from '@ckeditor/ckeditor5-widget/src/utils';
51
53
  conversion.for('dataDowncast').add(downcastImageHeightAttribute());
52
54
  conversion.for('dataDowncast').add(downcastImageSavedSrcAttribute(true));
53
55
  conversion.for('editingDowncast').add(downcastImageSavedSrcAttribute(false));
54
-
56
+
55
57
  conversion.for('downcast').add(downcastImageMapAttribute());
56
58
  conversion.for('downcast').add(downcastMapElement());
57
-
59
+
58
60
  conversion.for('downcast')
59
61
  .add(dowcastMapNameAttribute())
60
62
  .add(dowcastMapWidthAttribute())
61
63
  .add(dowcastMapHeightAttribute())
62
64
  .add(dowcastMapAreaAttribute());
63
-
65
+
64
66
  conversion.for('upcast').add(upcastImageMapAttribute());
65
67
  conversion.for('upcast').add(upcastImageHeightAttribute());
66
68
  conversion.for('upcast').add(upcastImageWidthAttribute());
67
69
  conversion.for('upcast').add(upcastImageSavedSrcAttribute());
68
70
  conversion.for('upcast').add(upcastMapElement());
69
-
71
+
70
72
  editor.commands.get('resizeImage').on('execute', debounced(() => {
71
- editor.execute(ImageMapCommands.RESIZE);
73
+ editor.execute(IMAGEMAP_COMMANDS.RESIZE_IMAGEMAP);
72
74
  }, 100));
73
75
 
74
- // this.listenTo(editingView.document, 'delete', ( evt, data ) => {
75
- // this.allowDeleteMap = true;
76
- // }, { context: [isWidget] });
77
-
78
- // this.listenTo(model.document, 'change:data', (event) => {
79
- // if(this.allowDeleteMap == true){
80
- // this.allowDeleteMap == false;
81
- // OnImageDeleted(model, event);
82
- // }
83
- // });
84
-
76
+ this.listenTo(editingView.document, 'delete', ( evt, data ) => {
77
+ this.allowDeleteMap = true;
78
+ }, { context: [isWidget] });
79
+
85
80
  this.listenTo(editingView.document, 'imageLoaded', (evt, domEvent) => {
86
81
  onImageLoaded(domEvent);
87
82
  });
88
-
89
- editor.commands.add(ImageMapCommands.INSERT, new InsertImageMapCommand(editor));
90
- editor.commands.add(ImageMapCommands.RESIZE, new ResizeImageMapCommand(editor));
91
- }
92
- }
93
-
94
- function OnImageDeleted(model, event){
95
- const differ = event.source.differ;
83
+
84
+ model.document.on('change:data', (evt, batch) => {
85
+ if(this.allowDeleteMap == true){
86
+ this.allowDeleteMap = false;
87
+ OnImageDeleted(model, batch);
88
+ }
89
+ } );
90
+
91
+ editor.commands.add(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG, new ImageMapDialogCommand(editor));
92
+ editor.commands.add(IMAGEMAP_COMMANDS.IMAGEMAP, new ImageMapCommand(editor));
93
+ editor.commands.add(IMAGEMAP_COMMANDS.RESIZE_IMAGEMAP, new ResizeImageMapCommand(editor));
94
+ }
95
+ }
96
+
97
+ function OnImageDeleted(model, batch){
98
+ if( batch.type == 'transparent'){
99
+ return;
100
+ }
101
+ const differ = model.document.differ;
96
102
  // if no difference
97
103
  if (differ.isEmpty) { return; }
98
104
  const changes = differ.getChanges({ includeChangesInGraveyard: true });
@@ -103,24 +109,24 @@ function OnImageDeleted(model, event){
103
109
  for (let i = 0; i < changes.length; i++){
104
110
  const change = changes[i]
105
111
  // if image remove exists
106
- if (change && change.type === 'remove' && change.name === 'image') {
112
+ if (change && change.type === 'remove' && change.name === IMAGEMAP_ELEMENTS.IMAGE) {
107
113
  hasNoImageRemoved = false
108
114
  break
109
115
  }
110
116
  }
111
-
117
+
112
118
  // if not image remove stop execution
113
119
  if (hasNoImageRemoved) { return; }
114
120
  // get removed nodes
115
- const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === 'image'))
116
-
121
+ const removedNodes = changes.filter(change => (change.type === 'insert' && change.name === IMAGEMAP_ELEMENTS.IMAGE))
122
+
117
123
  // removed image nodes
118
124
  const removedMapNames = []
119
125
  removedNodes.forEach(node => {
120
126
  let nodeAfter = node.position.nodeAfter;
121
- if(nodeAfter && nodeAfter.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
122
- let mapname = nodeAfter.getAttribute(ImageMapAttributes.IMAGE_USE_MAP) || '';
123
- removedMapNames.push(trimStart(mapname, '#'));
127
+ if(nodeAfter && nodeAfter.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP)){
128
+ let mapname = nodeAfter.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP) || '';
129
+ removedMapNames.push(trimStart(mapname, '#'));
124
130
  }
125
131
  });
126
132
 
@@ -129,8 +135,7 @@ function OnImageDeleted(model, event){
129
135
  const existingMapElements = findMapNodes(removedMapNames, range);
130
136
 
131
137
  if(existingMapElements && existingMapElements.length > 0){
132
- const redoingBatch = model.createBatch( 'transparent' );
133
- model.enqueueChange(redoingBatch, writer => {
138
+ model.enqueueChange(batch, writer => {
134
139
  existingMapElements.forEach(element => {
135
140
  writer.remove(element);
136
141
  });
@@ -144,40 +149,40 @@ function onImageLoaded(domEvent){
144
149
  if (!domEvent.target.matches('figure.image.ck-widget > img, figure.image.ck-widget > a > img')) {
145
150
  return;
146
151
  }
147
- if(domEvent.target.hasAttribute(HtmlAttributes.USE_MAP)
148
- && domEvent.target.getAttribute(HtmlAttributes.USE_MAP)
149
- && !domEvent.target.hasAttribute(HtmlAttributes.SAVED_SRC)){
150
-
151
- const originalSrc = domEvent.target.getAttribute(HtmlAttributes.SRC);
152
- const mapName = trimStart(domEvent.target.getAttribute(HtmlAttributes.USE_MAP), '#');
153
- const selector = `${HtmlElements.MAP}[${HtmlAttributes.NAME}='${mapName}']`;
154
- const map = document.querySelector(selector);
155
- if(map && map.childNodes){
156
- const areas = [];
157
- map.childNodes.forEach((child) =>{
158
- if(child.nodeName && child.nodeName.toLowerCase() === HtmlElements.AREA){
159
- let area = {};
160
- area[HtmlAttributes.COORDS] = child.getAttribute(HtmlAttributes.COORDS);
161
- area[HtmlAttributes.SHAPE] = child.getAttribute(HtmlAttributes.SHAPE) || '';
162
- areas.push(area);
163
- }
164
- });
165
- if(areas.length > 0){
166
- const width = map.getAttribute(HtmlAttributes.WIDTH) || domEvent.target.width;
167
- const height = map.getAttribute(HtmlAttributes.HEIGHT) || domEvent.target.height;
168
- const target = domEvent.target;
169
- drawMap(originalSrc, width, height, areas, (oldsrc, newsrc) => {
170
- if(target){
171
- target.setAttribute(HtmlAttributes.SRC, newsrc);
172
- target.setAttribute(HtmlAttributes.SAVED_SRC, oldsrc);
173
- }
174
-
175
- if(map){
176
- map.setAttribute(HtmlAttributes.WIDTH, width);
177
- map.setAttribute(HtmlAttributes.HEIGHT, height);
178
- }
179
- })
152
+ if(domEvent.target.hasAttribute(HTML_ATTRIBUTES.USE_MAP)
153
+ && domEvent.target.getAttribute(HTML_ATTRIBUTES.USE_MAP)
154
+ && !domEvent.target.hasAttribute(HTML_ATTRIBUTES.SAVED_SRC)){
155
+
156
+ const originalSrc = domEvent.target.getAttribute(HTML_ATTRIBUTES.SRC);
157
+ const mapName = trimStart(domEvent.target.getAttribute(HTML_ATTRIBUTES.USE_MAP), '#');
158
+ const selector = `${HTML_ELEMENTS.MAP}[${HTML_ATTRIBUTES.NAME}='${mapName}']`;
159
+ const map = document.querySelector(selector);
160
+ if(map && map.childNodes){
161
+ const areas = [];
162
+ map.childNodes.forEach((child) =>{
163
+ if(child.nodeName && child.nodeName.toLowerCase() === HTML_ELEMENTS.AREA){
164
+ let area = {};
165
+ area[HTML_ATTRIBUTES.COORDS] = child.getAttribute(HTML_ATTRIBUTES.COORDS);
166
+ area[HTML_ATTRIBUTES.SHAPE] = child.getAttribute(HTML_ATTRIBUTES.SHAPE) || '';
167
+ areas.push(area);
180
168
  }
169
+ });
170
+ if(areas.length > 0){
171
+ const width = map.getAttribute(HTML_ATTRIBUTES.WIDTH) || domEvent.target.width;
172
+ const height = map.getAttribute(HTML_ATTRIBUTES.HEIGHT) || domEvent.target.height;
173
+ const target = domEvent.target;
174
+ drawMap(originalSrc, width, height, areas, (oldsrc, newsrc) => {
175
+ if(target){
176
+ target.setAttribute(HTML_ATTRIBUTES.SRC, newsrc);
177
+ target.setAttribute(HTML_ATTRIBUTES.SAVED_SRC, oldsrc);
178
+ }
179
+
180
+ if(map){
181
+ map.setAttribute(HTML_ATTRIBUTES.WIDTH, width);
182
+ map.setAttribute(HTML_ATTRIBUTES.HEIGHT, height);
183
+ }
184
+ })
181
185
  }
186
+ }
182
187
  }
183
- }
188
+ }
@@ -1,49 +1,48 @@
1
1
  import { Plugin } from '@ckeditor/ckeditor5-core';
2
2
  import { ButtonView, ContextualBalloon } from '@ckeditor/ckeditor5-ui';
3
3
  import imageMapIcon from '../../themes/icons/imagemap.svg';
4
- import { ImageMapCommands } from './utils';
4
+ import { IMAGEMAP_COMMANDS } from './utils';
5
5
 
6
6
  export default class ImageMapUI extends Plugin {
7
-
7
+
8
8
  static get requires() {
9
9
  return [ ContextualBalloon];
10
10
  }
11
-
11
+
12
12
  static get pluginName() {
13
13
  return 'ImageMapUI';
14
14
  }
15
-
15
+
16
16
  init() {
17
17
  this._createButton();
18
18
 
19
19
  }
20
-
20
+
21
21
  destroy() {
22
22
  super.destroy();
23
23
  }
24
-
24
+
25
25
  _createButton() {
26
26
  const editor = this.editor;
27
27
  const t = editor.t;
28
-
28
+
29
29
  editor.ui.componentFactory.add('imageMap', locale => {
30
- const command = editor.commands.get(ImageMapCommands.INSERT);
30
+ const command = editor.commands.get(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG);
31
31
  const view = new ButtonView(locale);
32
-
32
+
33
33
  view.set({
34
34
  label: t('Image Map'),
35
35
  icon: imageMapIcon,
36
36
  tooltip: true
37
37
  });
38
-
38
+
39
39
  view.bind('isEnabled').to(command, 'isEnabled');
40
-
40
+
41
41
  this.listenTo(view, 'execute', () => {
42
- editor.execute(ImageMapCommands.INSERT, {});
42
+ editor.execute(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG);
43
43
  });
44
-
44
+
45
45
  return view;
46
46
  });
47
47
  }
48
48
  }
49
-
@@ -1,22 +1,23 @@
1
1
 
2
2
  import { Command } from '@ckeditor/ckeditor5-core';
3
3
  import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
4
- import { ImageMapAttributes, trimStart, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight } from './utils';
4
+ import { IMAGEMAP_ATTRIBUTES, parsePixelToFloat, findFirstMapNode, drawMap, resizeAreaWidth, resizeAreaHeight, createResizedEvent } from './utils';
5
5
  import { getSelectedImageWidget} from '@ckeditor/ckeditor5-image/src/image/utils';
6
+ import { trimStart } from '../common/qmsCKEditorUtil';
6
7
 
7
8
  export default class ResizeImageMapCommand extends Command {
8
-
9
+
9
10
  refresh() {
10
11
  const element = this.editor.model.document.selection.getSelectedElement();
11
- this.isEnabled = isImage(element) && element.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP);
12
+ this.isEnabled = isImage(element) && element.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP);
12
13
  }
13
-
14
- execute() {
14
+
15
+ execute( options = {}) {
15
16
  const editor = this.editor;
16
17
  const model = editor.model;
17
18
  const view = this.editor.editing.view;
18
19
  const imageElement = model.document.selection.getSelectedElement();
19
- const mapName = imageElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
20
+ const mapName = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_USE_MAP);
20
21
  if(mapName){
21
22
  const imageWidget = getSelectedImageWidget( view.document.selection);
22
23
  const widgetResizePlugin = editor.plugins.get('WidgetResize');
@@ -25,14 +26,14 @@ export default class ResizeImageMapCommand extends Command {
25
26
  const resizerWrapper = resizer._viewResizerWrapper;
26
27
  const newWidth = parsePixelToFloat(resizerWrapper.getStyle('width', 0));
27
28
  const newHeight = parsePixelToFloat(resizerWrapper.getStyle('height', 0));
28
-
29
+
29
30
  const range = model.createRangeIn(model.document.getRoot());
30
31
  const existingMapElement = findFirstMapNode(trimStart(mapName, '#'), range);
31
32
  if(existingMapElement){
32
- const areas = JSON.parse(existingMapElement.getAttribute(ImageMapAttributes.MAP_AREAS) || []);
33
- const width = parsePixelToFloat(existingMapElement.getAttribute(ImageMapAttributes.MAP_WIDTH, 0));
34
- const height = parsePixelToFloat(existingMapElement.getAttribute(ImageMapAttributes.MAP_HEIGHT, 0));
35
-
33
+ const areas = JSON.parse(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_AREAS) || []);
34
+ const width = parsePixelToFloat(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_WIDTH, 0));
35
+ const height = parsePixelToFloat(existingMapElement.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_HEIGHT, 0));
36
+
36
37
  const widthChanged = newWidth != width && width != 0 ;
37
38
  const heightChanged = newHeight != height && height != 0 ;
38
39
 
@@ -53,23 +54,24 @@ export default class ResizeImageMapCommand extends Command {
53
54
 
54
55
  const areasAsString = JSON.stringify(areas);
55
56
  model.change(writer => {
56
- let originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
57
- if(!imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) || !imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
58
- writer.setAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
57
+ let originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC);
58
+ if(!imageElement.hasAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC) || !imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC)){
59
+ writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
59
60
  }
60
61
  else{
61
- originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
62
+ originalImageSrc = imageElement.getAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SAVED_SRC);
62
63
  }
63
64
 
64
- writer.setAttribute(ImageMapAttributes.MAP_AREAS, areasAsString, existingMapElement);
65
- writer.setAttribute(ImageMapAttributes.MAP_WIDTH, newWidth, existingMapElement);
66
- writer.setAttribute(ImageMapAttributes.MAP_HEIGHT, newHeight, existingMapElement);
67
- writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, newWidth, imageElement);
68
- writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, newHeight, imageElement);
65
+ writer.setAttribute(IMAGEMAP_ATTRIBUTES.MAP_AREAS, areasAsString, existingMapElement);
66
+ writer.setAttribute(IMAGEMAP_ATTRIBUTES.MAP_WIDTH, newWidth, existingMapElement);
67
+ writer.setAttribute(IMAGEMAP_ATTRIBUTES.MAP_HEIGHT, newHeight, existingMapElement);
68
+ writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_WIDTH, newWidth, imageElement);
69
+ writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_HEIGHT, newHeight, imageElement);
69
70
 
70
71
  drawMap(originalImageSrc, newWidth, newHeight, areas, (oldsrc, newsrc) =>{
71
- model.enqueueChange(writer => {
72
- writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
72
+ model.enqueueChange(writer.batch, writer => {
73
+ writer.setAttribute(IMAGEMAP_ATTRIBUTES.IMAGE_SRC, newsrc, imageElement);
74
+ this.fire(createResizedEvent(mapName));
73
75
  });
74
76
  });
75
77
  });
@@ -77,6 +79,5 @@ export default class ResizeImageMapCommand extends Command {
77
79
  }
78
80
  }
79
81
  }
80
- }
82
+ }
81
83
  }
82
-